JavaScript modifying an object inside the array

Question

I am having a problem trying to modify the name of a nested object using map function and to return the modified object.

I was trying the approach with double forEach loop but I am also failing with that.

const myObject = [{
    id: 1,
    childrenList: [{
        id: 1,
        name: 'foo',
      },
      {
        id: 2,
        name: 'foo',
      },
    ],
  },
  {
    id: 2,
    childrenList: [{
        id: 1,
        name: 'foo',
      },
      {
        id: 2,
        name: 'foo',
      },
    ],
  },
];

const alteredObject = myObject.map((thisChild) => {
  if (thisChild.id === 1) {
    thisChild.childrenList.map((item) => {
      if (item.id === 1) {
        return {
          ...item,
          name: 'bar',
        };
      }
      return item;
    });
  }
  return thisChild;
});

console.log(alteredObject);

//trying to get:
alteredObject = [
    {
      id: 1,
      childrenList: [
        {
          id: 1,
          name: 'bar',
        },
        {
          id: 2,
          name: 'foo',
        },
      ],
    },
    {
      id: 2,
      childrenList: [
        {
          id: 1,
          name: 'foo',
        },
        {
          id: 2,
          name: 'foo',
        },
      ],
    },
  ];

This is the first time I am trying to modify a nested object. Normally with an array of objects, I am not having any issue so I am not sure what I am doing wrong

mgm793 · Accepted Answer · 2022-07-25 08:00:41Z

You only need to update the children with your map and it will work. Like this:

  const myObject = [
    {
      id: 1,
      childrenList: [
        {
          id: 1,
          name: "foo"
        },
        {
          id: 2,
          name: "foo"
        }
      ]
    },
    {
      id: 2,
      childrenList: [
        {
          id: 1,
          name: "foo"
        },
        {
          id: 2,
          name: "foo"
        }
      ]
    }
  ];

  const alteredObject = myObject.map((thisChild) => {
    if (thisChild.id === 1) {
      thisChild.childrenList = thisChild.childrenList.map((item) => {
        if (item.id === 1) {
          return {
            ...item,
            name: "bar"
          };
        }
        return item;
      });
    }
    return thisChild;
  });
  console.log(alteredObject);

And if you want to do it with forEach:

  const myObject = [
    {
      id: 1,
      childrenList: [
        {
          id: 1,
          name: "foo"
        },
        {
          id: 2,
          name: "foo"
        }
      ]
    },
    {
      id: 2,
      childrenList: [
        {
          id: 1,
          name: "foo"
        },
        {
          id: 2,
          name: "foo"
        }
      ]
    }
  ];

  const alteredObject = myObject.map((thisChild) => {
    if (thisChild.id === 1) {
      thisChild.childrenList.forEach((item) => {
        if (item.id === 1) {
          item.name = 'bar';
        }
        return item;
      });
    }
    return thisChild;
  });
  console.log(alteredObject);

If you can modify your object then you can do it with two forEach:

  const myObject = [
    {
      id: 1,
      childrenList: [
        {
          id: 1,
          name: "foo"
        },
        {
          id: 2,
          name: "foo"
        }
      ]
    },
    {
      id: 2,
      childrenList: [
        {
          id: 1,
          name: "foo"
        },
        {
          id: 2,
          name: "foo"
        }
      ]
    }
  ];

 myObject.forEach((thisChild) => {
    if (thisChild.id === 1) {
      thisChild.childrenList.forEach((item) => {
        if (item.id === 1) {
          item.name = 'bar';
        }
        return item;
      });
    }
  });
  console.log(myObject);

This is exactly what I needed, thanks. Just a question - isn't 2x forEach loop not recommended?
I added the solution with 2 forEachs but then you are modifying the original object.

IISkullsII · Accepted Answer · 2022-07-25 11:55:12Z

As you already know, Array.prototype.map() returns a new Array containing the modified version.
In your first map function myObject.map(), you aren't saving the second map function modified result as the childrenList content.
therefore no changes would be stored in the first map function and the result would have no changes.

const alteredObject = myObject.map((thisChild) => {
  if (thisChild.id === 1) {
    // Here you should save the result of this 
    // Array.prototype.map() Function as the new 'thisChild.childrenList'
    thisChild.childrenList = thisChild.childrenList.map((item) => {
      // ...
    });
  }
  return thisChild;
});

const myObject = [{
    id: 1,
    childrenList: [{
        id: 1,
        name: 'foo',
      },
      {
        id: 2,
        name: 'foo',
      },
    ],
  },
  {
    id: 2,
    childrenList: [{
        id: 1,
        name: 'foo',
      },
      {
        id: 2,
        name: 'foo',
      },
    ],
  },
];

const alteredObject = myObject.map((thisChild) => {
  if (thisChild.id === 1) {
    thisChild.childrenList = thisChild.childrenList.map((item) => {
      if (item.id === 1) {
        return {
          ...item,
          name: 'bar',
        };
      }
      return item;
    });
  }
  return thisChild;
});

console.log(alteredObject);

nem0z · Accepted Answer · 2022-07-25 07:51:30Z

0

You can use this code :

const myObject = [
    {
    id: 1,
    childrenList: [
        { id: 1, name: 'foo', },
        { id: 2, name: 'foo', },
    ],
  },
  {
    id: 2,
    childrenList: [
        { id: 1, name: 'foo', },
        { id: 2, name: 'foo', },
    ],
  },
];

let result = myObject.map(
    el => el.id === 1 ? 
    {...el, childrenList: el.childrenList.map(child => child.id === 1 ? {...child, name: 'bar'} : child)} 
    : el
);

console.log(result);

answered Jul 25, 2022 at 7:51

nem0z

1,1371 gold badge7 silver badges23 bronze badges

Comments

Terry Lennox · Accepted Answer · 2022-07-25 07:52:15Z

0

This can be done with a couple of map calls, we'll alter the name value if the firstChild id is 1 and the leaf object id is also 1:

const myObject = [ { id: 1, childrenList: [ { id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, { id: 2, childrenList: [ { id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, ]; 

const alteredObject = myObject.map((thisChild) => {
  return { ...thisChild, childrenList: thisChild.childrenList.map(({id, name}) => { 
      return { id, name: (thisChild.id === 1 && id === 1) ? 'bar': name };
  })}
});
  
  
console.log(alteredObject)

.as-console-wrapper { max-height: 100% !important; }

edited Jul 25, 2022 at 7:52

answered Jul 25, 2022 at 7:44

Terry Lennox

30.9k5 gold badges36 silver badges45 bronze badges

Comments

raz-ezra · Accepted Answer · 2022-07-25 07:53:40Z

0

The array map method creates a new array (mdn), so the parent object alteredObject still has the childrenList key pointing to the original array. To solve this, you can add assignment of the new array to the key:

thisChild.childrenList = thisChild.childrenList.map(...)

This way, the key will point to the newly created array

answered Jul 25, 2022 at 7:53

raz-ezra

5592 silver badges15 bronze badges

Comments

PeterKA · Accepted Answer · 2022-07-25 14:51:51Z

0

You're missing a return; you have to return the modified thisChild as {...thisChild, childrenList:modifiedChildrenList}

const myObject = [{ id: 1, childrenList: [{ id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, { id: 2, childrenList: [{ id: 1, name: 'foo', }, { id: 2, name: 'foo', }, ], }, ];

const alteredObject = myObject.map((thisChild) => {
  if (thisChild.id === 1) {
    return {...thisChild,childrenList:thisChild.childrenList.map((item) => {
        if (item.id === 1) {
          return {
            ...item,
            name: 'bar',
          };
        }
        return item;
      })
    }
  }
  return thisChild;
});

console.log(alteredObject);

edited Jul 25, 2022 at 14:51

answered Jul 25, 2022 at 8:35

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

2 Comments

h_a_l_a_s Over a year ago

There is something missing: Result: [ [ { "id": 1, "name": "bar" }, { "id": 2, "name": "foo" } ], { "id": 2, "childrenList": [ { "id": 1, "name": "foo" }, { "id": 2, "name": "foo" } ] } is not equal to the one expected. Missing first parent object with id 1 in the array

PeterKA Over a year ago

You're quite right; it's fixed now.

Collectives™ on Stack Overflow

JavaScript modifying an object inside the array

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related