Log In

How to Parse JSON in JavaScript

How to Parse JSON in JavaScript
22.03.2024
Reading time: 7 min
Hostman Team
Technical writer

Let’s start this article with a simple, approachable, and reader-friendly way to grasp the concept. To begin, let’s discuss what JSON is.

A basic JavaScript function called JSON parsing enables programmers to transform JSON strings into functional JavaScript objects. This is made easier with the integrated in JS parsing JSON function. Take the JSON string {"name": "John", "age": 30}, for instance. This string is converted into a JavaScript object with characteristics like name and age using JSON.parse(). This kind of power is especially important when working with external data sources, like APIs. For example, the response.json() method is used to parse the JSON content when retrieving JSON data from a server using the Fetch API. The program can then easily use the parsed data to provide dynamic and engaging user experiences. 

JSON (JavaScript Object Notation)

The term JSON, JavaScript Object Notation, is a data interchange format particularly used to interchange data between several platforms. JSON is among the best formats that play a significant role in communicating and interchanging data. JS JSON parser is easy for humans to read, write, and understand in a simplified way, and for machines, it is likely easier to generate and parse data. Furthermore, it is an independent programming language that follows a programming approach that is compatible with general programming ideas. As a result, JSON parser in JS is used in JavaScript for storing and conveying data between the server and the client.

JSON Syntax Rules

  • Data is required to be in key-value pairs.

  • Data is separated from each other using commas.

  • Curly brackets hold objects.

  • Square brackets hold arrays.

Example of JSON

For example, consider an object named employee that contains three employee records. This object can be represented in JSON format as follows:

{
"πšŽπš–πš™πš•πš˜πš’πšŽπšŽπšœ":[
   {"πšπš’πš›πšœπšπ™½πšŠπš–πšŽ":"π™Όπš’πš•πš•πš’πšŽ", "πš•πšŠπšœπšπ™½πšŠπš–πšŽ":"π™²πš›πš’πšœπšπš’πš—πšŠ"},
   {"πšπš’πš›πšœπšπ™½πšŠπš–πšŽ":"πš†πšŠπšπšœπš˜πš—", "πš•πšŠπšœπšπ™½πšŠπš–πšŽ":"πšƒπš‘πš˜πš–πšŠπšœ"},
   {"πšπš’πš›πšœπšπ™½πšŠπš–πšŽ":"π™ΉπšŠπšœπš–πš’πš—πšŠ", "πš•πšŠπšœπšπ™½πšŠπš–πšŽ":"π™½πš’πšŒπš”"}
]
}

Syntactically, the code used to create JavaScript objects is identical to that of the JSON format. Therefore, this closeness makes it easy for a JavaScript program to transform JSON data into native JavaScript objects.

JSON Data (Name and Value)

  • JSON data is expressed as name/value pairs, much like the properties of JavaScript objects.

  • A field name (in double quotes), a colon (:), and a value make up a name/value pair.

For instance:

"πšπš’πš›πšœπšπ™½πšŠπš–πšŽ":"πš‚πš’πš›πš•πš’πšŽ"

Note: Keep in mind that JSON names need double quotes on the other hand JavaScript names do not.

JSON Objects

  • Curly brackets are used to write JSON objects. 

  • Objects can include many name/value pairs, just like in JavaScript.

For instance:

{"πšπš’πš›πšœπšπ™½πšŠπš–πšŽ":"πš‚πš’πš›πš•πš’πšŽ", "πš•πšŠπšœπšπ™½πšŠπš–πšŽ":"π™Όπš’πšŒπš”πš˜πš—"}

Working with JSON

Changing a JSON Text to a JavaScript Object

Reading data from a web server and displaying it on a web page is a popular use for parsing json in js. To keep things simple, let's say we have a string as input.

Make a JavaScript string with JSON syntax first:

πšŸπšŠπš› 𝚝𝚎𝚑𝚝 = '{ "πšŽπš–πš™πš•πš˜πš’πšŽπšŽπšœ" : [' +
'{ "πšπš’πš›πšœπšπ™½πšŠπš–πšŽ":"π™Ήπš˜πš—πšŠπšœ" , "πš•πšŠπšœπšπ™½πšŠπš–πšŽ":"π™°πš•πšŠπš—" },' +
'{ "πšπš’πš›πšœπšπ™½πšŠπš–πšŽ":"πš”πš‘πšŠπš’" , "πš•πšŠπšœπšπ™½πšŠπš–πšŽ":"πš‹πš›πš˜πš˜πš”" },' +
'{ "πšπš’πš›πšœπšπ™½πšŠπš–πšŽ":"πš“πšŽπšœπšœπš’πšŒπšŠ" , "πš•πšŠπšœπšπ™½πšŠπš–πšŽ":"πšœπš–πš’πšπš‘" } ]}';

After that, use the JavaScript built-in function JSON.parse() to translate the string into a JavaScript object just as the example given below.

var obj = JSON.parse(text);

Conclusively, now you can use the new JavaScript object.

Example:

<πš™ πš’πš="πšπšŽπš–πš˜"></πš™>

<πšœπšŒπš›πš’πš™πš> πšπš˜πšŒπšžπš–πšŽπš—πš.πšπšŽπšπ™΄πš•πšŽπš–πšŽπš—πšπ™±πš’π™Έπš("πšπšŽπš–πš˜").πš’πš—πš—πšŽπš›π™·πšƒπ™Όπ™» = πš˜πš‹πš“.πšŽπš–πš™πš•πš˜πš’πšŽπšŽπšœ[𝟷].πšπš’πš›πšœπšπ™½πšŠπš–πšŽ + " " + πš˜πš‹πš“.πšŽπš–πš™πš•πš˜πš’πšŽπšŽπšœ[𝟷].πš•πšŠπšœπšπ™½πšŠπš–πšŽ; </πšœπšŒπš›πš’πš™πš>

Let's now explore the several JavaScript ways for parsing JSON data.

JSON.parse()

JavaScript has a built-in function called JSON.parse() to turn a JSON string into a JavaScript object. The syntax is straightforward.

Example:

πšŒπš˜πš—πšœπš πš“πšœπš˜πš—πš‚πšπš›πš’πš—πš = '{"πš—πšŠπš–πšŽ": "π™Ήπš˜πš‘πš—", "𝚊𝚐𝚎": 𝟹0}';
πšŒπš˜πš—πšœπš πš“πšœπš˜πš—π™Ύπš‹πš“πšŽπšŒπš = π™Ήπš‚π™Ύπ™½.πš™πšŠπš›πšœπšŽ(πš“πšœπš˜πš—πš‚πšπš›πš’πš—πš);
πšŒπš˜πš—πšœπš˜πš•πšŽ.πš•(πš“πšœπš˜πš—π™Ύπš‹πš“πšŽπšŒπš); // π™Ύπšžπšπš™πšžπš: { πš—πšŠπš–πšŽ: 'π™Ήπš˜πš‘πš—', 𝚊𝚐𝚎: 𝟹0 }

Parsing JSON from a File

External files are frequently used to store JSON data. In JavaScript, you may use asynchronous methods like fetch() or frameworks like Axios to get and parse JSON data from a file. Here's an example with fetch():

πšπšŽπšπšŒπš‘('𝚍𝚊𝚝𝚊.πš“πšœπš˜πš—')
 .πšπš‘πšŽπš—(πš›πšŽπšœπš™πš˜πš—πšœπšŽ => πš›πšŽπšœπš™πš˜πš—πšœπšŽ.πš“πšœπš˜πš—())
  .πšπš‘πšŽπš—(𝚍𝚊𝚝𝚊 => πšŒπš˜πš—πšœπš˜πš•πšŽ.πš•πš˜πš(𝚍𝚊𝚝𝚊))
  .πšŒπšŠπšπšŒπš‘(πšŽπš›πš›πš˜πš› => πšŒπš˜πš—πšœπš˜πš•πšŽ.πšŽπš›πš›πš˜πš›('π™΄πš›πš›πš˜πš› πšπšŽπšπšŒπš‘πš’πš—πš π™Ήπš‚π™Ύπ™½:', πšŽπš›πš›πš˜πš›));

Handling JSON Arrays

JSON arrays are defined as comma-separated values surrounded by square brackets []. You can parse JSON arrays in the same way that you can parse objects using JSON.parse().

Example:

πšŒπš˜πš—πšœπš πš“πšœπš˜πš—π™°πš›πš›πšŠπš’πš‚πšπš›πš’πš—πš = '[{"πš—πšŠπš–πšŽ": "π™Ήπš˜πš‘πš—", "𝚊𝚐𝚎": 𝟹0}, {"πš—πšŠπš–πšŽ": "π™°πš•πš’πšŒπšŽ", "𝚊𝚐𝚎": 𝟸𝟻}]';
πšŒπš˜πš—πšœπš πš“πšœπš˜πš—π™°πš›πš›πšŠπš’ = π™Ήπš‚π™Ύπ™½.πš™πšŠπš›πšœπšŽ(πš“πšœπš˜πš—π™°πš›πš›πšŠπš’πš‚πšπš›πš’πš—πš);
πšŒπš˜πš—πšœπš˜πš•πšŽ.πš•(πš“πšœπš˜πš—π™°πš›πš›πšŠπš’); // π™Ύπšžπšπš™πšžπš: [ { πš—πšŠπš–πšŽ: 'π™Ήπš˜πš‘πš—', 𝚊𝚐𝚎: 𝟹0 }, { πš—πšŠπš–πšŽ: 'π™°πš•πš’πšŒπšŽ', 𝚊𝚐𝚎: 𝟸𝟻 } ]

Error Handling

When processing JSON data, it is critical to handle mistakes graciously. If the supplied string contains invalid JSON, the JSON.parse() function returns a SyntaxError. You may use try-catch blocks to deal with parsing errors:

Example:

πšŒπš˜πš—πšœπš πš’πš—πšŸπšŠπš•πš’πšπ™Ήπšœπš˜πš—πš‚πšπš›πš’πš—πš = '{πš—πšŠπš–πšŽ: "π™Ήπš˜πš‘πš—", 𝚊𝚐𝚎: 𝟹0}';
πšπš›πš’ {
  πšŒπš˜πš—πšœπš πš™πšŠπš›πšœπšŽπšπ™³πšŠπšπšŠ = π™Ήπš‚π™Ύπ™½.πš™πšŠπš›πšœπšŽ(πš’πš—πšŸπšŠπš•πš’πšπ™Ήπšœπš˜πš—πš‚πšπš›πš’πš—πš);
  πšŒπš˜πš—πšœπš˜πš•πšŽ.πš•πš˜πš(πš™πšŠπš›πšœπšŽπšπ™³πšŠπšπšŠ);
} πšŒπšŠπšπšŒπš‘ (πšŽπš›πš›πš˜πš›) {
  πšŒπš˜πš—πšœπš˜πš•πšŽ.πšŽπš›πš›πš˜πš›('π™΄πš›πš›πš˜πš› πš™πšŠπš›πšœπš’πš—πš π™Ήπš‚π™Ύπ™½:', πšŽπš›πš›πš˜πš›);
}

Reviver Function

The JSON.parse() method takes an optional reviver function as its second argument. This method lets you change how the JSON parsing process works by changing the processed value before it is returned.

Example:

πšŒπš˜πš—πšœπš πš“πšœπš˜πš—πš‚πšπš›πš’πš—πšπš†πš’πšπš‘π™³πšŠπšπšŽπšœ = '{"𝚍𝚊𝚝𝚎": "𝟸0𝟸𝟺-0𝟸-πŸΈπŸΉπšƒπŸ·πŸΈ:00:00.000πš‰"}'; πšŒπš˜πš—πšœπš πš“πšœπš˜πš—π™Ύπš‹πš“πšŽπšŒπšπš†πš’πšπš‘π™³πšŠπšπšŽπšœ = π™Ήπš‚π™Ύπ™½.πš™πšŠπš›πšœπšŽ(πš“πšœπš˜πš—πš‚πšπš›πš’πš—πšπš†πš’πšπš‘π™³πšŠπšπšŽπšœ, (πš”πšŽπš’, πšŸπšŠπš•πšžπšŽ) => { πš’πš (πš”πšŽπš’ === '𝚍𝚊𝚝𝚎') { πš›πšŽπšπšžπš›πš— πš—πšŽπš  π™³πšŠπšπšŽ(πšŸπšŠπš•πšžπšŽ); } πš›πšŽπšπšžπš›πš— πšŸπšŠπš•πšžπšŽ; }); πšŒπš˜πš—πšœπš˜πš•πšŽ.πš•πš˜πš(πš“πšœπš˜πš—π™Ύπš‹πš“πšŽπšŒπšπš†πš’πšπš‘π™³πšŠπšπšŽπšœ.𝚍𝚊𝚝𝚎 πš’πš—πšœπšπšŠπš—πšŒπšŽπš˜πš π™³πšŠπšπšŽ); // π™Ύπšžπšπš™πšžπš: πšπš›πšžπšŽ

Fetch with JSON parsing

Retrieves data from an external source (such as an API) and automatically parses it into JSON.

Example:

πšπšŽπšπšŒπš‘('πš‘πšπšπš™πšœ://πšŠπš™πš’.πšŽπš‘πšŠπš–πš™πš•πšŽ.πšŒπš˜πš–/𝚍𝚊𝚝𝚊') .πšπš‘πšŽπš—(πš›πšŽπšœπš™πš˜πš—πšœπšŽ => πš›πšŽπšœπš™πš˜πš—πšœπšŽ.πš“πšœπš˜πš—()) .πšπš‘πšŽπš—(𝚍𝚊𝚝𝚊 => πšŒπš˜πš—πšœπš˜πš•πšŽ.πš•πš˜πš(𝚍𝚊𝚝𝚊.πš—πšŠπš–πšŽ)) // π™°πšœπšœπšžπš–πš’πš—πš πšπš‘πšŽ 𝙰𝙿𝙸 πš›πšŽπšπšžπš›πš—πšœ π™Ήπš‚π™Ύπ™½ πš πš’πšπš‘ 𝚊 "πš—πšŠπš–πšŽ" πš™πš›πš˜πš™πšŽπš›πšπš’ .πšŒπšŠπšπšŒπš‘(πšŽπš›πš›πš˜πš› => πšŒπš˜πš—πšœπš˜πš•πšŽ.πšŽπš›πš›πš˜πš›(πšŽπš›πš›πš˜πš›)); 

Cautions to Parsing JSON in JavaScript 

  • JSON parsing is an essential ability for web developers.

  • Learn how to use JSON.parse() and JSON.stringify() for fundamental functionality.

  • As your demands change, you can explore more complex approaches.

  • Prioritize data security and validation.

Conclusion

In a nutshell, one of the most important aspects of web development is parsing JSON in JavaScript, which allows JSON strings to be converted into JavaScript objects for efficient data handling. This procedure is made simpler by the integrated JSON.parse() function, which enables developers to easily integrate and use external data—especially when utilizing APIs. The foundation for developing dynamic and interactive user interfaces is provided by JavaScript, a flexible and popular computer language. 

Furthermore, json parsing js is an essential component of contemporary web development because of its interoperability with both HTML and CSS and a thriving ecosystem of tools and frameworks. JavaScript has a significant impact on how online applications run and how users interact with them, whether it is through performance optimization, data gathering from other sources, or best practices implementation. 

Share