Replace array in nested object in Javascript

Question

I have spent a good part of the day trying to replace arrays of an existing nested object but I can't figure out how to do it. This is my original object:

{
  "id": "a8df1653-238a-4f23-fe42-345c5d928b34",
  "webSections": {
    "id": "x58654a9-283b-4fa6-8466-3f7534783f8",
    "sections": [
      {
        "id": "92d7e428-4a5b-4f7e-bc7d-b761ca018922",
        "title": "Websites",
        "questions": [
          { 
            id: 'dee6e3a6-f207-f3db-921e-32a0b745557', 
            text: 'Website questions', 
            items: Array(11)
         }
        ]
      },
      {
        "id": "79e42d88-7dd0-4f70-b6b4-dea4b4a64ef3",
        "title": "Blogs",
        "questions": [
          ...
        ]
      },
      {
        "id": "439ded88-d7ed0-de70-b6b4-dea4b4a64e840",
        "title": "App questions",
        "questions": [
          ...
        ]
      }
    ]
}

I would like replace the question arrays in the original object or in a copy of it.

const newMenu = [
{id: '34bb96c7-1eda-4f10-8acf-e6486296f4dd', text: 'Website questions', items: Array(24)},
{id: '520c2d3f-6117-4f6a-904f-2477e3347472', text: 'Blog questions', item: Array(7)},
{id: '302b658a-9d8c-4f53-80f6-3f2275bfble', title: 'App questions', items: Array(14)}
]

I am trying to do this by its index but unfortunately it doesn't work.

 webSections.sections.forEach((item, index) => {
   return webSections.sections[index].questions, newMenu[index]);
 }

Does anyone see what am I doing wrong?

Ramesh Reddy · Accepted Answer · 2021-11-06 16:42:59Z

1

The value returned from the callback passed to forEach will not be used anywhere.

If you want to avoid mutating the original object and update questions, you can use Array.prototype.map and object spread syntax.

const object = {
  "id": "a8df1653-238a-4f23-fe42-345c5d928b34",
  "webSections": {
    "id": "x58654a9-283b-4fa6-8466-3f7534783f8",
    "sections": [
      {
        "id": "92d7e428-4a5b-4f7e-bc7d-b761ca018922",
        "title": "Websites",
        "questions": [
          { 
            id: 'dee6e3a6-f207-f3db-921e-32a0b745557', 
            ...

const updatedObject = {
 ...object,
 webSections: {
  ...object.webSections,
  sections: object.webSections.sections.map((section, index) => ({...section, questions: newMenu[index]}))
 }
}

If you just want to mutate the original object

object.webSections.sections.forEach((_, index) => {
 section.questions = newMenu[index]
})

edited Nov 6, 2021 at 16:42

answered Nov 6, 2021 at 16:28

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

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

Comments

emre-ozgun · Accepted Answer · 2021-11-06 16:36:18Z

0

    const newSections = myObj.webSections.sections.map((obj, index) => {
        const newQuestions = newItems[index];
        return {
            ...obj,
            questions: [newQuestions],
        };
    });

    console.log(newSections);

MyObj is the main object. This shall produce the new sections array you can combine it with your main object I suppose...

@Ramesh Reddy has the most thorough answer.

edited Nov 6, 2021 at 16:36

answered Nov 6, 2021 at 16:28

emre-ozgun

7621 gold badge11 silver badges19 bronze badges

Comments

fgkolf · Accepted Answer · 2021-11-06 16:44:30Z

0

The simplest way if you don't care about mutation is:

myObject.webSections.sections.forEach((section, index) => {
  section.questions = newMenu[index].items;
})

You have used your 'forEach' with wrong syntax. Check MDN on how it's used.

edited Nov 6, 2021 at 16:44

answered Nov 6, 2021 at 16:35

fgkolf

1,0655 silver badges17 bronze badges

Collectives™ on Stack Overflow

Replace array in nested object in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related