You can use built-in tools to create or modify an array of JSON objects in JavaScript since JSON is based on this programming language. Learn more about those tools below.

Array of JSON Objects In JavaScript

Create An Array Of JSON Objects From A JSON String

There are several ways to convert a JSON string to an array of JavaScript objects. But the most common approach is to parse it with the JSON.parse() method first and push its elements into an array with the push() method.

The JSON.parse() method will construct the JavaScript object or value described by a given string. You can also provide it with the reviver function as a parameter to carry out a transformation on the returned object.

On the other hand, the push() method of an array appends new elements to it, returning the length of the new array. It is a mutating method, meaning it changes the content and length of the array. You will need to use solutions like concat() if you want to keep the original array intact while returning a copy with elements added to the end.

Here is an example of combining them together:

var sites = '[{"ranking":1, "name":"ITTutoria"}, {"ranking":2, "name":"Stack Overflow"}, {"ranking":3, "name":"Quora"}]';
var JSONobj = JSON.parse(sites);
var res = [];

for(var i in JSONobj)
    res.push(JSONobj[i]);

console.log(res);

Output:

[ { ranking: 1, name: 'ITTutoria' },
  { ranking: 2, name: 'Stack Overflow' },
  { ranking: 3, name: 'Quora' } ]

As you can see, the JSON.parse() converts a string into an Object first. Then we use the push() function to add every element to the res array. The result is an array of three JSON objects. If you want to read from a JSON file instead, check out this guide.

Access The Array

Remember that the array we have created above is also a JavaScript array. We all know that array indexing doesn’t involve name-value pairs. Instead, they use zero-based indexing to access elements of the array.

This is how we access the first element of the array, which is also the first item in our JSON string.

console.log(res[0])

Output:

{ ranking: 1, name: 'ITTutoria' }

What if we want to access the values of JSON pairs? You can just invoke the name of the pair like a method of that JSON object.

console.log(res[0].name)
console.log(res[0].ranking)
console.log(res[1].name)
console.log(res[1].ranking)

Output:

ITTutoria
1
Stack Overflow
2

Modify The Array

You can add another object to any position in an existing JavaScript array. Depending on your desired addition, you can use the push(), unshift(), or splice() methods of the Array class.

We have mentioned the push() method adds elements at the end of the array. In the opposite direction, we have the unshift() method, which adds elements to the beginning of an array.

Like push(), the unshift() method is also intentionally generic. You can call or apply it to objects that resemble arrays. If you pass multiple elements as parameters, they will be inserted at the same time into the array, in the same order you pass them to unshift().

Example:

var newsite = {"ranking":4, "name":"Reddit"};
res.unshift(newsite);
console.log(res);

Output:

[ { ranking: 4, name: 'Reddit' },
  { ranking: 1, name: 'ITTutoria' },
  { ranking: 2, name: 'Stack Overflow' },
  { ranking: 3, name: 'Quora' } ]

Our array now has 4 JSON objects as its element. The newest element has been added to the beginning of the array.

To remove, replace, or add a new object at any position, you can use the splice() method.

res.splice(0, 1);
console.log(res);

Output:

[ { ranking: 1, name: 'ITTutoria' },
  { ranking: 2, name: 'Stack Overflow' },
  { ranking: 3, name: 'Quora' } ]

Conclusion

Thanks to various methods and functions, you can create, access, and modify an array of JSON objects in JavaScript. They treat this array mostly in the same way as JavaScript arrays of other data types.