How do I add new element to JSON object in multiple places referring to an another element using JavaScript?

Question

I have a Json response as follow with multiple repeated arrays and would need to add a new element&value in each array after "bcd" using javascript code.

{
    "id": "123",
    "discount": [
        {
            "abc": xx,
            "bcd": xxx,
             "mc": {
            "dca": "xx",
            },
            "typ": "xx",
            "state": "xx",
            "mns": []
        },

        {
        "abc": xxx,
        "bcd": xxx,
        "dca": "xxx",
        },
     ]

}

expected response:

{
    "id": "123",
    "discount": [
        {
            "abc": xx,
            "bcd": xxx,
            "newelement":new value,
             "mc": {
            "dca": "xx",
            },
            "typ": "xx",
            "state": "xx",
            "mns": []
        },

            {
            "abc": xxx,
            "bcd": xxx,
           "newelement":new value
            "dca": "xxx",
            },
         ]
}

Can anyone please suggest how to do this using JavaScript,

`object.discount.forEach(o => o[newElement] = newValue)` – Rajesh Jun 15 '17 at 10:25 — Rajesh, Jun 15 '17 at 10:25

score 1 · Answer 1 · answered Jun 15 '17 at 10:26

You can simply use

obj.discount.forEach(function(x) { x.newelement = "new value"; });

to iterate through your discount array and add a new property to all of its objects.

However, it won't guarantee the order and it actually should not. Even if one JSON serializer provides some way of ordering for properties, another will not.
JSON is not a string and not a text, is it primarily data.
JSON / JS object properties are not ordered - that's the main difference between arrays and objects.

Read more on this topic here: Does JavaScript Guarantee Object Property Order?

In general, you should never rely on order of JSON object properties and should never expect someone to rely on it.

score 0 · Answer 2 · answered Jun 15 '17 at 10:44

You could map over the discounts array returning new objects with all the properties you want.

This has the benefit of breaking object references and mutability preventing any side effects throughout your code from mutating properties of a common object.

These patterns are equivalent, but the es6 version will currently only work with babel compilation.

const data = {
  "id": "123",
  "discount": [
    { "abc": 'xx' },
    { "abc": 'xxx' }
  ]
}

// es5
data.discount = data.discount.map(function(x) {
  return Object.assign({}, x, {
    newElement: 'new value'
  })
})

// es6
data.discount = data.discount.map(x => ({
  ...x,
  newElement: 'new value'
}))

console.log(data)

score 0 · Answer 3 · answered Jun 16 '17 at 04:45

Here is a solution to your problem. Fiddle https://jsfiddle.net/tt92jkhx/

var test = { "id": "123", "discount": [ { "abc": "xx", "bcd": "xx", "mc": { "dca": "xx", }, "typ": "xx", "state": "xx", "mns": [] } ] };

 for(var i=0;i<test.discount.length;i++){
   var disc = test.discount[i];
   disc['newElement']='SomeValue';      
 }

 console.log(test);

score 0 · Answer 4 · answered Jun 16 '17 at 04:53

You can use ES6 Array for...of loop to iterate the discount array of an object to add the property in the each object of an array.

var jsonObj = {
    "id": "123",
    "discount": [
        {
            "abc": "xx",
            "bcd": "xxx",
             "mc": {
            "dca": "xx",
            },
            "typ": "xx",
            "state": "xx",
            "mns": []
        },
        {
        "abc": "xxx",
        "bcd": "xxx",
        "dca": "xxx",
        },
     ]
};

for (var value of jsonObj.discount) {
  value.newelement = "new value";
}

console.log(jsonObj.discount);

As yeldar-kurmangaliyev said in his answer that JSON/JS object properties are not ordered. Hence, it won't guarantee the order.

check this post for more reference on object property order : https://stackoverflow.com/a/5525820/4116300

How do I add new element to JSON object in multiple places referring to an another element using JavaScript?

4 Answers4