Is there a way to clone an array which is nested inside another array in an object-CodePudding

I have an obj that looks like this.

let obj= {
  title:"my form",
  endTIme:"2/20/22",
  mainList:[
    {
      type:"multiple", 
      checked:false,
      multiple:[
         {
           optionCheck: false,
           optionAnswer:""
         }
      ]
    }
  ]
}

I also have a button that every time I click, I want the obj fields to retain all its values only that the multiple array field should append a new object . But I cant seem to figure it out. Please I really need help

I tried cloning using spread operator and I wasn't getting the result I want as I learnt that spread operator is best used for shallow cloning

let newObj= {
 ...obj
  mainList:[
     ...obj.mainList,
    {
      multiple:[
         {
           optionCheck: false,
           optionAnswer:""
         }
      ]
    }
  ]
}

And this ends up duplicating the mainList instead.

What I want my result to like is this when I click the button once.

let obj = {
  title: "my form",
  endTIme: "2/20/22",
  mainList: [{
    type: "multiple",
    checked: false,
    multiple: [
    {
      optionCheck: false,
      optionAnswer: ""
    }, 
    {
      optionCheck: false,
      optionAnswer: ""
    }]
  }]
};

CodePudding user response：

I'm not sure of what you want but you should spread the multiple array too. And there is a pair of {} you should delete.

let newObj= {
 ...obj
  mainList:[
     ...obj.mainList,
      multiple:[
         ...obj.mainList.multiple,
         {
           optionCheck: false,
           optionAnswer:""
         }
      ],
  ]
}
```

CodePudding user response：

Just use array.push

let obj= {
  title:"my form",
  endTIme:"2/20/22",
  mainList:[
    {
      type:"multiple", 
      checked:false,
      multiple:[
         {
           optionCheck: false,
           optionAnswer:""
         }
      ]
    }
  ]
}

obj.mainList[0].multiple.push( {
           optionCheck: false,
           optionAnswer:""
         });
         
console.log(obj)

CodePudding user response：

Yeah, its just a case of continuing to use the spread operator:

const newObj= {
 ...obj
  mainList:[
     ...obj.mainList,
    {
      multiple:[
         ...obj.mainList.multiple,
         {
           optionCheck: false,
           optionAnswer:""
         }
      ]
    }
  ]
}

The alternative is keeping the let as you have already and targeting the keys you're updating:

let newObj = {
 ...obj
};

newObj["mainList"]["multiple"] = newObj["mainList"]["multiple"].concat({
  optionCheck: false,
  optionAnswer:""
});

// Or if you want it at the begining
newObj["mainList"]["multiple"] = [{
  optionCheck: false,
  optionAnswer:""
}].concat(...newObj["mainList"]["multiple"]);


// Another way
newObj["mainList"]["multiple"].push({
  optionCheck: false,
  optionAnswer:""
})

EDIT: As another answer has also said, you can use push (see above)