Are you having difficulties with the technique to parse a JSON Array in JavaScript? Don’t be concerned! In this article, we’ll offer some solutions to fix it in the nick of time. Let’s get started!

The way to parse a JSON Array in JavaScript?

Before learning how to answer the question above, we would like to give you some base information about JSON Array.

JSON appears to be standard JavaScript, but it is a data format, much like a text file. JavaScript and JSON are similar since they were both inspired by the syntax of JavaScript.

String, number, and some JSON objects can all be contained in JSON arrays, which function in the same way as JavaScript arrays.

Method 1: Utilize JSON.Parse() method 

The JSON.parse function converts a JSON string into a JavaScript value or object that corresponds to the string’s description. This technique has syntax as:

JSON.parse(text, reviver)

Parameters:

Text: The string that will be parsed as JSON. JSON syntax is described in the JSON object.

Reviver: Unnecessary, When this is a function, it specifies how the value generated by parsing is converted before being handed back.

Then take a look at the example below: 

const myMessage = `
{
  "success": true,
  "counters": [
    {
      "counterName": "dsd",
      "counterType": "sds",
      "counterUnit": "sds"
    },
    {
      "counterName": "gdg",
      "counterType": "dfd",
      "counterUnit": "ds"
    }
  ]
}
`;

const jsonData = JSON.parse(myMessage);
for (const counter of jsonData.counters) {
  console.log(counter.counterName);
}

We use the myMessage string to make a JSON.parse request. The counters array attribute of the parsed jsonData object is then iterated using a for-of loop. After that, every object with counter.counterName has a counterName property, which is what we retrieve in it.

Method 2: Utilize fetch

The json(), which parses JSON responses and converts them into a usable JavaScript object literal or array, is the simplest way to get data from an API.

Take a look at fetch syntax:

fetch(file)

file: optional, The fetch() function takes only one parameter, which is the URL of the resource to be retrieved. 

Then apply to the program we will have:

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal

  .then(data => console.log(data));

Using the command above, we will get the output as below: 

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

}

While it appears to be a JSON object, it is a JavaScript object that you could always flexibly use for any program.

Conclusion

ITtutoria hopes you found our page to be the most helpful in understanding how to parse a JSON Array in JavaScript. We also hope this gives you some insight into what you’ve experienced and a few more options for avoiding it in the future. If you have any further problems with this error, please comment, and we will get back to you as soon as possible! Thank you for your time!

Read more 

→ How To Parse A JSON String In TypeScript?