如何将元素添加到数组 javascript 中的 object

Question

I have an array of objects and it is structured as so:

let array1 = [{}]
array1.push({
   title: 'myTitle1',
   extendedProps: {
      field1: 'hello'
   }
})

now what I am trying is do an axios.get request and use the data returned to add a new element into array1 . I am successfully retrieving the data from the axios request, however, when I try to push the data: res.data[i]._doc.userIsReg , like so:

array1.push({
  ...array1,
  extendedProps: {
        ...array1.extendedProps,
        userIsReg: true
  }  
})

as you can see, I am using the spread functionaluty to include the current data from array1 into the array and then I try to append a new element userIsReg to the object extendedProps . Now, I assumed this would work, however, when I do this, it creates new object entries within the array and includes everything from inside the array currently (from spread functionality) and adds new entries with the userIsReg in there.

so to be more clear, I start with this:

[{
   title: 'myTitle1',
   extendedProps: {
      field1: 'hello'
   }
},
{
   title: 'myTitle2',
   extendedProps: {
      field1: 'hello2'
   }
}, 
]

and then once i do the array1.push with the spread functionality, i get this:

 [{
       title: 'myTitle1',
       extendedProps: {
          field1: 'hello'
       }
    },
    {
       title: 'myTitle2',
       extendedProps: {
          field1: 'hello2'
       }
    }, 
    {
       title: 'myTitle1',
       extendedProps: {
          field1: 'hello',
          userIsReg: true
       }
    },
    {
       title: 'myTitle2',
       extendedProps: {
          field1: 'hello2',
          userIsReg: true
       }
    }, 
    ]

so basically doubles everything up, instead of appending it to the current array. how would i fix this?

Answer 1

You can do something like following once you have response

array1.map(element => ({...element, userIsReg: true}))

It will add userIsReg flag to each object of your array.

Now as you want it inside extendedProps , you can use following

array1.map(element => (
    {...element, 
    extendedProps: {
       ...element.extendedProps, 
       userIsReg: true 
    }}))

Answer 2

as you defined your array in let type you can do it in this way:

array1 = [...array1.filter(item=> item.title === selected_item.title ),{
  ...selected_item,userIsReg: true 
}]

what I did is to just remove the previous element and add a new one with a new value if you want to preserve order of array you can sort that

Answer 3

Try this way :

 let array1 = [{ title: 'myTitle1', extendedProps: { field1: 'hello' } }, { title: 'myTitle2', extendedProps: { field1: 'hello2' } }]; array1.forEach(obj => { obj.extendedProps['userIsReg'] = true // this value is coming from API }); console.log(array1);