JavaScript updating value of array element

Question

I have below JSON Array and I am trying to add new object to one of the array element, but problem that I am facing is:
If I push new object for an array array1 at index 0 of arrayHolder then all the array1 elements are getting updated with new object.

{
  "arrayHolder": [
    {
      "array1": [],
      "array2": [],
      "array3": [],
      "array4": []
    },
    {
      "array1": [],
      "array2": [],
      "array3": [],
      "array4": []
    },
    {
      "array1": [],
      "array2": [],
      "array3": [],
      "array4": []
    },
    {
      "array1": [],
      "array2": [],
      "array3": [],
      "array4": []
    }
 ]
}

I am using below code to push to array1:

var jsonStr = "{\"arrayHolder\":[{\"array1\": [],\"....."; // Json String
var jsonObj = JSON.parse(jsonStr); // String To object 

var newObj = {"value": 1}; // New object that I want to push 
jsonObj.arrayHolder[0].array1.push(newObj);

// Even below code has same output
jsonObj.arrayHolder[0]["array1"][0] = newObj;

I get below output:

{
  "arrayHolder": [
    {
      "array1": [{"value": 1}],
      "array2": [],
      "array3": [],
      "array4": []
    },
    {
      "array1": [{"value": 1}],
      "array2": [],
      "array3": [],
      "array4": []
    },
    {
      "array1": [{"value": 1}],
      "array2": [],
      "array3": [],
      "array4": []
    },
    {
      "array1": [{"value": 1}],
      "array2": [],
      "array3": [],
      "array4": []
    }
 ]
}

I want to update value of array1 only for the 0th element in the arrayHolder array not for all the array1 elements in the main array.

is the array holder actually coming from json? it seems like it is not, otherwise change in one place wont be reflected in another place — ehab
– ehab, Commented May 31, 2020 at 14:25
jsfiddle.net/w6k2p38a I created a small demo there. And how you can see it works! — Nick
– Nick, Commented May 31, 2020 at 14:39
This demo is working fine. newObj is only added to the 0th element in the arrayHolder array. — palaѕн
– palaѕн, Commented May 31, 2020 at 14:46

ehab · Accepted Answer · 2020-05-31 14:21:43Z

1

The issue is with the array holder, it seems that the array holder is using the same object, and so modifying it in one place will cause the change to be reflected in all places.

answered May 31, 2020 at 14:21

ehab

8,1741 gold badge28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jadli · Accepted Answer · 2020-05-31 14:41:42Z

Please try this Solution, @ehab has given you resion why your solution not working, you are using same object to complete object x and as you know object and array are Ref type in Javascript

var x={
  "arrayHolder": [
    {
      "array1": [],
      "array2": [],
      "array3": [],
      "array4": []
    },
    {
      "array1": [],
      "array2": [],
      "array3": [],
      "array4": []
    },
    {
      "array1": [],
      "array2": [],
      "array3": [],
      "array4": []
    },
    {
      "array1": [],
      "array2": [],
      "array3": [],
      "array4": []
    }
 ]
}
 var jsonStr =JSON.stringify(x)// Json String
var jsonObj = JSON.parse(jsonStr); // String To object 
debugger
var newObj = {"value": 1}; // New object that I want to push 
jsonObj.arrayHolder[0].array1.push(newObj);

result=JSON.stringify(jsonObj)
console.log("result:"+result)

result:{"arrayHolder":[{"array1":[{"value":1}],"array2":[],"array3":[],"array4":[]},{"array1":[],"array2":[],"array3":[],"array4":[]},{"array1":[],"array2":[],"array3":[],"array4":[]},{"array1":[],"array2":[],"array3":[],"array4":[]}]}

double-beep · Accepted Answer · 2020-05-31 14:46:43Z

0

Try:

jsonObj.['arrayHolder'][0]['array1'].push(newObj);

edited May 31, 2020 at 14:46

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered May 31, 2020 at 14:21

NduJay

8201 gold badge12 silver badges26 bronze badges

Collectives™ on Stack Overflow

JavaScript updating value of array element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related