How to add an array element to JSON object in JavaScript.

From time to time we need to manipulate JSON data by adding new elements into it. A JSON object is typically more difficult to directly edit as its normally in a string format.

So, how can you add an array element into a JSON Object in JavaScript?

This is done by using the JavaScript native methods .parse()and .stringify()

We want to do this following:

Parse the JSON object to create a native JavaScript Object
Push new array element into the object using .push()
Use stringify() to convert it back to its original format.

Let’s take the following JSON string data as an example:

'{"characters":[{"name":"Tommy Vercetti","location":"Vice City"},{"name":"Carl Johnson","location":"Grove Street"},{"name":"Niko Bellic","location":"Liberty City"}]}'

We have a list of notorious GTA characters in our JSON. Let’s say we want to add one more character:

{"name":"Ken Rosenberg","location":"Vice City"}

First, we need to parse our original JSON data

const obj = JSON.parse(data);

Then we want to add our new character into the parsed object:

obj["characters"].push({ name: "Ken Rosenberg", location: "Vice City" });

With the new character added, our JSON object now looks like this:

{
   "characters":[
      {
         "name":"Tommy Vercetti",
         "location":"Vice City"
      },
      {
         "name":"Carl Johnson",
         "location":"Grove Street"
      },
      {
         "name":"Niko Bellic",
         "location":"Liberty City"
      },
      {
         "name":"Ken Rosenberg",
         "location":"Vice City"
      }
   ]
}

Finally, we want to flip the data variable back into its original stringified JSON format:

data = JSON.stringify(obj);

And there you have it. Remember, that JSON is just a different type of notation so its always available to be transformed back into a proper JavaScript object for data manipulation.

Menu

How to add an array element to JSON object in JavaScript.