Home > Back-end >  Javascript : Modify object and add new index to a property
Javascript : Modify object and add new index to a property

Time:06-01

My object is something like:

let items = 
    [
        {
            "creationTimeStamp": "2022-05-31T17:04:28.000Z",
            "modifiedTimeStamp": "2022-05-31T17:04:28.000Z",
            "locations": [
                {
                    "id": "5ao",
                    "name": "Store1"
                }
            ],
            "typeId": "Lead"
        }
    ]

I am trying to push the following object into the locations property:

{
    "id": "9a0",
    "name": "Store2"
}

I have tried doing

items1 = [];
for (var i = 0; i < items.length; i  ) {
    items1.id = "9a0";
    items1.name = "Store2";
    //9 is some static index value added
    Object.assign({9 : items1}, items[i].locations);
}

If I console(Object.assign({9 : items1}, items[i].locations)); I can see 2 arrays inside it, but my items locations property is still the same.

My expectation is as below:

[
    {
        "creationTimeStamp": "2022-05-31T17:04:28.000Z",
        "modifiedTimeStamp": "2022-05-31T17:04:28.000Z",
        "locations": [
            {
                "id": "5ao",
                "name": "Store1"
            },
            {
                "id": "9a0",
                "name": "Store2"
            }
        ],
        "typeId": "Lead"
    }
]

I also tried to use items[i].locations.push(item1) but then got:

TypeError: Cannot add property 9, object is not extensible

I also tried to assign a new array to items[i].locations, but then got:

TypeError: Cannot assign to read only property 'locations' of object '#'

What can I do to get the desired result?

CodePudding user response:

You seem to expect that the second argument given to Object.assign will be mutated. But it is the first argument that is mutated. That means your .locations is not mutated. Moreover, in comments you indicate that locations cannot be extended and that the property is read-only.

So that means you'll need a complete new object.

Some other remarks:

  • Don't initialise items1 as an array, since it is supposed to be a plain object.

  • Declare a variable with const, let or var and avoid implicit global declaration.

  • It is safer to declare the items1 object inside the loop, so you create a new object each time and don't mutate the same object. For your example code it makes no difference, but it can lead to unexpected behaviour.

  • As you don't need i for anything else than items[i], and you actually need a complete new structure, use .map instead.

So:

items = items.map(item => {
    let obj = {
        id: "9a0",
        name: "Store2"
    };
    return {...item, locations: item.locations.concat(obj) };
});

CodePudding user response:

items is an array so it must access the first position of the array, which would be the proposed object. With this, from the proposed object you will extract thelocation attribute and since this is an array, you use the push function to insert the new object

items[0]
// ->
// {
//   creationTimeStamp: '2022-05-31T17:04:28.000Z',
//   modifiedTimeStamp: '2022-05-31T17:04:28.000Z',
//   locations: [ { id: '5ao', name: 'Store1' } ],
//   typeId: 'Lead'
// }

I try this:

items[0].locations.push({"id": "9a0", "name": "Store2" })

And now:

items[0]
//->
// {
//   creationTimeStamp: '2022-05-31T17:04:28.000Z',
//   modifiedTimeStamp: '2022-05-31T17:04:28.000Z',
//   locations: [ { id: '5ao', name: 'Store1' }, { id: '9a0', name: 'Store2' }],
//   typeId: 'Lead'
// }

CodePudding user response:

I always think in terms of functions, and of immutability-by-default, so my approach might look like this, with addLocationToAll built atop a simpler addLocation. The code is fairly simple:

const addLocation = (newLoc) => ({locations, ...rest}) => 
  ({...rest, locations: locations .concat (newLoc)})

const addLocationToAll = (newLoc) => (items) => 
  items .map (addLocation (newLoc))

const items = [{creationTimeStamp: "2022-05-31T17:04:28.000Z", modifiedTimeStamp: "2022-05-31T17:04:28.000Z", locations: [{id: "5ao", name: "Store1"}], typeId:"Lead"}]
const newLoc = {id: "9a0", name: "Store2"}

console .log (addLocationToAll (newLoc) (items))
.as-console-wrapper {max-height: 100% !important; top: 0}

CodePudding user response:

Simply use Array.prototype.push() and Spread syntax ... to clone an object

const items = [
  {locations: [{id: "5ao", name: "Store1"}]},
  {locations: [{id: "5ao", name: "Store1"}]},
];

const newLocation = {id: "9a0", name: "Store2"};

// Task: Add location to all items:
items.forEach(item => item.locations.push({...newLocation}));

console.log(items)

or without object cloning:

const items = [
  {locations: [{id: "5ao", name: "Store1"}]},
  {locations: [{id: "5ao", name: "Store1"}]},
];

const newLocation = {id: "9a0", name: "Store2"};

// Task: Add location to all items:
items.forEach(item => item.locations.push(newLocation));

console.log(items)

  • Related