Updated April 13, 2023
Introduction to JSON Parse Array
The JSON is the javascript object notation it’s a light-weight component for exchanging the data whereas interchange the data formats between the client and server is quickly view and easy to parse the data and generate the newly converted format data in the client view. In general xml and json both are a text-based model format for receiving the server response data because the text format is easy to overwrite and is understand easily for both users and machines when compared to the xml json has less bandwidth versions. If we use JSON.parse() in-built method it’s directly called and derived from the javascript array and also returns the same instead of the javascript instance.
Syntax:
The json.parse() method is declared and called the function in the <script> tag in html codes.The basic syntax of the parse() method as follows.
<html>
<body>
<script>
var variable name;
document.getElementById('").innerHTML=variable name;
JSON.parse(variable name)
---some javascript logic codes---
</script>
</body>
</html>The above codes are to declare the variable name and print the values using DOM and innerHTML tags with the help of a pre-defined method called JSON.parse() for converting the server response data into the Array format.
How does JSON Parse Array Work?
Whenever the server response will be received using the xml and json formats the raw data will be converted into the user-customization formats. It will be used for parses the JSON string values and also either it will be constructing by the javascript values or object is described with the string format. First, the json is to read the user data from the web servers and displayed the data in the web page first is converted into the string format using JSON.stringify() and next is again converted string into arrays using JSON.parse() method.This method parses the JSON string and returns the value for javascript is equal for whatever the user will send the request and they received the response data is more equivalent. When we parse the string value to the JSON.parse method and the result data will be assigned to the particular data variables moreover we passed the data variable values to the print statement here in javascript we use the document.ElementByID() that is dom object or we use console.log method to print the data is also used for verification purposes whether the result data contents are not changed. We can use eval in javascript sometimes but moreover here it’s not recommended because of security risks JSON.parse method also not safer purpose in javascript but is more efficient some situations if we make it sure for whether the server response datas not used for JSON.parse() method because that times the received data are not secured contents and also it will come from some unwanted and untrusted web sites as the sources so we can’t use JSON.parsemethod.This method will check whether the data is passed correctly or not if it is any issue occurs that means error or exceptions is also throws as a syntax error or some other expression errors if suppose the JSON is not valid data. We already mentioned untrusted websites or unsecured contents has could pose a high-risk so it can be deleted automatically in the script.
We use JSON.parse method has another feature called json_encode is an important one because when we received the datas from the server-side websites or we sent the request using any tools like postman etc that data is encrypted and decrypted here this encrypted datas used with some backend languages like PHP etc. JSON.parse method also includes the second level arguments called reviver options this method can be used to modify the user screens if suppose we edit or modified the original values.The multi-dimensional arrays also applicable for JSON.parse() method which means one array is denoted with either numerically or associatively indexed and another one is both numerically and associatively indexed.
Examples of JSON Parse Array
Following are the examples of JSON Parse Array is given below:
Example #1
Code:
<!DOCTYPEhtml>
<html>
<body>
<h2>Welcome To My Domain</h2>
<p id="demo">
First Name: <span id="fname"></span><br>
Last Name: <span id="lname"></span><br>
</p>
<script>
var s = '{"employees":[' +
'{"firstName":"siva","lastName":"raman" },' +
'{"firstName":"arun","lastName":"kumar" },' +
'{"firstName":"king","lastName":"siva" }]}';
var j = JSON.parse(s);
for (vari = 0; i<j.employees.length; i++) {
var c = j.employees[i];
alert(c.firstName);
}
</script>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPEhtml>
<html>
<body>
<h2>Welcome To My Domain</h2>
<p id="demo">
</p>
<script>
var e = '{"name":"Siva","age":32,"Dates" : "May 27, 2020" ,"address":"Tiruppur"}';
var e1 = JSON.parse(e, functionrevivers(key, values) {
if (key == "name") {
values = "Mr./Ms. " + values;
}
if(key == "Dates"){
values= new Date(values);
}
return values;});
document.getElementById("demo").innerHTML =
"Name = " + e1.name + "<br/> Age = " + e1.age + "<br/>Dates = " + e1.Dates + "<br/> Address = " + e1.address;
console.log(e1);
</script>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPEhtml>
<html>
<body>
<h2>Welcome To My Domain</h2>
<p id="demo">
</p>
<script>
var s = '{"employees":[' +
'{"firstName":"siva","city":"tup" },' +
'{"firstName":"arun","city":"cbe" },' +
'{"firstName":"x","city":"mas" },' +
'{"firstName":"r","city":"rjp" },' +
'{"firstName":"tr","city":"pnb" },' +
'{"firstName":"rew","city":"kar" },' +
'{"firstName":"ert","city":"ker" },' +
'{"firstName":"uuy","city":"mhs" },' +
'{"firstName":"tre","city":"up" },' +
'{"firstName":"df","city":"delhi" },' +
'{"firstName":"gg","city":"goa" },' +
'{"firstName":"ardsfun","city":"sikkim" },' +
'{"firstName":"fbb","city":"jhar" },' +
'{"firstName":"kuu","city":"har" },' +
'{"firstName":"king","city":"jk" }]}';
var j = JSON.parse(s);
for (vari = 0; i<j.employees.length; i++) {
var c = j.employees[i];
alert(c.city);
}
</script>
</body>
</html>Output:
The above examples we use the json.parse method in different ways we use some special functions like the alert is used for trigger the user for whether the output value is correct or not we use string values declaration using some special characters like ‘[‘,’{‘,’]’,’}’ etc. These characters will initialize values in the variables and they will use it for the conversion method like JSON.parse() we use the reviver method for retrieving the values in the JSON format strings.
Conclusion
We can see JSON method called parse() for different scenarios and its purposes it can be used for receptacle is not for particularly bounded with single usages. When compared to other format tools JSON is one of the best for making web projects and its endeavors, best used for storing configuration datas.
Recommended Articles
This is a guide to JSON Parse Array. Here we also discuss the introduction and how does json parse array works along with different examples and its code implementation. You may also have a look at the following articles to learn more –
