CODEWITHSUNDEEP
javascriptnested-object
Ronald
Ronald

Reputation: 69

Replace array in nested object in Javascript

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?

Upvotes: 0

Views: 2060

Answers (3)

fgkolf
fgkolf

Reputation: 1065

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.

Upvotes: 0

Ramesh Reddy
Ramesh Reddy

Reputation: 10662

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

Upvotes: 1

emre-ozgun
emre-ozgun

Reputation: 762

    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.

Upvotes: 0

Related Questions