How to Parse JSON in JavaScript

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.