How to modify properties in array

Question

I'm trying to modify a property in an array and add new elements under it.

The array was taken from - https://jsonplaceholder.typicode.com/users

My code just added a new properties instead of modifying them

I tried the following code (by using axios)

const axios = require('axios');

const getData = async() => {
    let {data: myData} = await axios.get('https://jsonplaceholder.typicode.com/users')

    myData.forEach((e) => {
        myData.push({
            phone: {
                "phoneNumber": e.phone,
                "phoneType": ''
            }
        })
    })
    console.log(myData)
}

I want to get -

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone":{
     "phoneNumber": "1-770-736-8031 x56442",
      "phoneType": ''
},
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },

But I'm getting

[ { id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: '[email protected]',
    address:
     { street: 'Kulas Light',
       suite: 'Apt. 556',
       city: 'Gwenborough',
       zipcode: '92998-3874',
       geo: [Object] },
    phone: '1-770-736-8031 x56442',
    website: 'hildegard.org',
    company:
     { name: 'Romaguera-Crona',
       catchPhrase: 'Multi-layered client-server neural-net',
       bs: 'harness real-time e-markets' } },

  { phoneNumber: '1-770-736-8031 x56442', phoneType: '' },
]

Why do you have two myData.forEach loops here to begin with? — misorude
– misorude, Commented Jul 29, 2019 at 13:27
This was part of the code which I forgot to remove. just corrected it, sorry. — YanPro
– YanPro, Commented Jul 29, 2019 at 13:30
There is no such thing as a "json array". JSON is a text format. Once you get it from axios, it's just an array. — Heretic Monkey
– Heretic Monkey, Commented Jul 29, 2019 at 13:31
myData is an array, not sure why you expect to get something else after your forEach — thedude
– thedude, Commented Jul 29, 2019 at 13:31
Possible duplicate of Modify object property in an array of objects — Heretic Monkey
– Heretic Monkey, Commented Jul 29, 2019 at 13:33

Kinjal · Accepted Answer · 2019-07-29 13:31:47Z

1

You can try this:

myData.forEach((e, index) => {
        myData[index].phone =  {
                "phoneNumber": e.phone,
                "phoneType": ''
            }
    })

OR

myData.forEach((e, index) => {
        e.phone =  {
                "phoneNumber": e.phone,
                "phoneType": ''
            }
    })

answered Jul 29, 2019 at 13:31

Kinjal

6803 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

libik · Accepted Answer · 2019-07-29 13:32:38Z

0

myData is an array, so by calling myData.push you are adding one more object to an array.

Using forEach will give you each object in an array in variable e so you need to use the e.

As you want to update object inside array, then you probably want this:

const getData = async() => {
    let {data: myData} = await axios.get('https://jsonplaceholder.typicode.com/users')

    myData.forEach((e) => {
        e.phone = {
                "phoneNumber": e.phone,
                "phoneType": ''
            }
    })
    console.log(myData)
}

answered Jul 29, 2019 at 13:32

libik

23.1k10 gold badges52 silver badges94 bronze badges

Comments

charlietfl · Accepted Answer · 2019-07-29 13:32:25Z

0

You want to transform the existing phone property not push a new object to the array

myData.forEach((e) => {
    e.phone = {
            "phoneNumber": e.phone,
            "phoneType": ''
        };       
});

answered Jul 29, 2019 at 13:32

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Jason Davin · Accepted Answer · 2019-07-29 14:15:18Z

0

Use map array function

const data = myData.map(user => ({ ...user, phone: {
    phoneNumber: user.phone,
    phoneType: ''
}}));

answered Jul 29, 2019 at 14:15

Jason Davin

1

Collectives™ on Stack Overflow

How to modify properties in array

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related