Parse JSON In JavaScript
Last Updated : Mar 12, 2024
IN - JavaScript JSON | Written & Updated By - Riya
In this article we will show you the solution of parse Json in JavaScript, JSON.parse() is the JavaScript method for parsing JSON. When you parse a JSON string in JavaScript, you may look at the string version of a JSON object to create a JavaScript object.
JSON.parse(): It is a JavaScript function that parses a JSON string and creates the JavaScript value or object suggested by the string.
It takes a JSON string as an input and returns a JavaScript object with the JSON contents.
We may stringify the JSON after processing it with the JSON.stringify() function.
JSON.stringify(): It is simpler to send data between a server and a web application by using JSON.stringify() to transform a JavaScript object or value into a JSON string.
Step By Step Guide On Parse Json In Javascript :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> parse json in javascript </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> parse json in JavaScript </h3>
</center>
<script>
const JSONdata = '{ "name" : "peter", "color" : "yellow", "age" : "20", "city" : "london", "gender" : "male"}' ;
//parsing the JSON data using JSON,.parse()
JSONdata = JSON.parse(JSONdata) ;
console.log(JSONdata.name) ;
console.log("<br>") ;
console.log(JSONdata.age) ;
console.log("<br>") ;
console.log(JSONdata.city) ;
console.log("<br>") ;
console.log(JSONdata.color) ;
console.log("<br>") ;
console.log(JSONdata.gender) ;
console.log("<br>") ;
//strigify the JSON data using JSON.stringify()
JSONdata = JSON.stringify(JSONdata) ;
console.log(JSONdata) ;
</script>
</body>
</html>
- Specifying the HTML version of a file is done by writing <!DOCTYPE html> in the HTML code.
- The <HTML> tag, indicating the root of an HTML document, should be included and closed with the </html> tag at the end.
- Metadata for the HTML file is contained within the <head> tag, which is terminated with the </head> tag.
- The HTML document's title is defined using the <title> tag, followed by the </title> tag.
- Styling for the HTML page will be achieved by utilizing an external CSS file.
- CSS can be added using the <style> tag.
- JavaScript can be written within the <script> tag, and it should be closed with the </script> tag.
- Create a JSON object named JSONdata using const
- Now using JSON.parse() to parse the JSON data.
- Using console.log() to obtain the JSON data and also write HTML tag <br> to add space
- If we want to stringify again, use JSON.stringify().
- Again use console.log() to get the whole JSON value.
Conclusion :-
At last, in conclusion, we can say that with this article’s help, we know parse JSON using JavaScript.
I hope this article on parse Json in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
