How to parse a JSON Array in JavaScript

# Parse a JSON Array in JavaScript

Use the JSON.parse() method to parse a JSON array, e.g. JSON.parse(arr). The method parses a JSON string and returns its JavaScript value or object equivalent.

If the provided parameter is not valid JSON, the JSON.parse method throws a SyntaxError exception.

index.js

Copied!
const jsonArr = '[{"id": 1, "name": "Tom"}, {"id": 2, "name": "Alice"}]';

const arr = JSON.parse(jsonArr);

// 👇️ [{id: 1, name: 'Tom'}, {id: 2, name: 'Alice'}]
console.log(arr);

console.log(Array.isArray(arr)); // 👉️ true

parse json array

The code for this article is available on GitHub

We used the JSON.parse() method to parse a JSON array into its JavaScript equivalent.

The only parameter the JSON.parse() method takes is the JSON string that should be parsed.

You can use the Array.isArray() method to verify that a value is a native JavaScript array.

index.js

Copied!
console.log(Array.isArray([])); // 👉️ true
console.log(Array.isArray('')); // 👉️ false

using array isarray method

A JSON value will always be of type string.

index.js

Copied!
const arr = ['bobby', 'hadz', 'com'];

const json = JSON.stringify(arr);

console.log(json); // 👉️ ["bobby","hadz","com"]
console.log(typeof json); // 👉️ string

If you provide an invalid JSON string to the method, a SyntaxError exception is thrown.

index.js

Copied!
const invalidJson = '[{id: 1}]';

// ⛔️ SyntaxError: Expected property name or '}' in JSON at position 2
console.log(JSON.parse(invalidJson));

The JSON array in the example doesn't have double quotes around the id property, which makes it invalid.

The JSON.parse() method attempts to parse the JSON but is unable to do so and throws an exception.

# Using a `try/catch` statement to handle a potential error

If you need to handle this scenario, you can parse the JSON array inside of a try/catch block to make sure your program doesn't crash.

index.js

Copied!
const jsonArr = '[{"id": 1, "name": "Tom"}, {"id": 2, "name": "Alice"}]';
let arr;

try {
  arr = JSON.parse(jsonArr);
  console.log('✅ JSON array parsed successfully');
} catch (err) {
  console.log('⛔️ invalid JSON provided');
  // report error
}

// 👇️ [{id: 1, name: 'Tom'}, {id: 2, name: 'Alice'}]
console.log(arr);

using try catch statement to handle a potential error

The code for this article is available on GitHub

If the provided JSON is invalid and our catch block runs where we can handle the error.

If the JSON is valid, it gets parsed and assigned to the arr variable.

If your JSON is invalid, google for a JSON validator and paste it into the text box.

See what errors your JSON contains and correct them - either on the server or use the String.replace() or String.replaceAll() methods to correct them on the client.

# Making sure your JSON array is valid

For example, the following code replaces all single quotes with double quotes to produce a valid JSON array.

index.js

Copied!
const invalidJson = "['apple', 'banana']";

const validJson = invalidJson.replaceAll(`'`, `"`);

// 👇️ {'apple', 'banana'}
const parsed = JSON.parse(validJson);
console.log(parsed);

make sure your json array is valid

The code for this article is available on GitHub

We used the String.replaceAll() method to replace all occurrences of single quotes with double quotes to make the JSON array valid.

The String.replaceAll() method returns a new string with all matches of a pattern replaced by the provided replacement.

The method takes the following parameters:

Name	Description
pattern	The pattern to look for in the string. Can be a string or a regular expression.
replacement	A string used to replace the substring match by the supplied pattern.

The String.replaceAll() method returns a new string with the matches of the pattern replaced. The method doesn't change the original string.

Strings are immutable in JavaScript.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to parse a JSON Array in JavaScript

# Parse a JSON Array in JavaScript

# Using a try/catch statement to handle a potential error

# Making sure your JSON array is valid

# Additional Resources

Borislav Hadzhiev

# Using a `try/catch` statement to handle a potential error