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": "Sincere@april.biz",
    "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: 'Sincere@april.biz',
    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, Jul 29 '19 at 13:27
This was part of the code which I forgot to remove. just corrected it, sorry. — YanPro, Jul 29 '19 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, Jul 29 '19 at 13:31
`myData` is an array, not sure why you expect to get something else after your `forEach` — thedude, Jul 29 '19 at 13:31
Possible duplicate of [Modify object property in an array of objects](https://stackoverflow.com/questions/16691833/modify-object-property-in-an-array-of-objects) — Heretic Monkey, Jul 29 '19 at 13:33

score 1 · Answer 1 · answered Jul 29 '19 at 13:31

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": ''
            }
    })

score 0 · Answer 2 · answered Jul 29 '19 at 13:32

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 '19 at 13:32

charlietfl

170,828
13
121
150

score 0 · Accepted Answer · answered Jul 29 '19 at 13:32

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)
}

score 0 · Answer 4 · answered Jul 29 '19 at 14:15

0

Use map array function

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

answered Jul 29 '19 at 14:15

Jason Davin

1

How to modify properties in array

4 Answers4