The JSON string is a handy format to switch information between terminals. Virtually all the API responses you see are in JSON string format.
The JSON string ought to be parsed to learn the information bundled with this string.
JSON.parse perform is used to transform a JSON string right into a JavaScript object.
Fast instance
The beneath fast instance has an enter JSON string having properties of animals. The properties are saved in a multi-level hierarchy.
The JSON.parse() JS perform converts this JSON string enter into an object array.
const jsonString = `{
"animals": {
"Lion": {
"identify": "Lion",
"sort": "Wild",
"Location": {
"1": {
"zoo-1": "San Diego Zoo",
"zoo-2": "Bronx Zoo"
}
}
}
}
}`;
javaScriptObject = JSON.parse(jsonString)
console.log(javaScriptObject);
The above code will log the output of the transformed JSON into the browser’s developer console.
Output:
animals:
Lion:
Location:
1:
zoo-1: "San Diego Zoo"
zoo-2: "Bronx Zoo"
identify: "Lion"
sort: "Wild"
The supply JSON string could be from many alternative assets. For instance,
- It may be saved within the database that’s to be parsed.
- It may be a response to an API.
The JSON string will include many forms of information like dates, capabilities and extra.
The next examples give code to discover ways to convert a JSON string that comprises several types of information. Within the earlier article, we’ve seen the right way to convert a JavaScript object to JSON.
How the date within the JSON string might be transformed
If the enter JSON string comprises date values, the JSON.parse() JS perform ends in a date string.
For instance, the date in 2014-11-25 into Tue Nov 25 2014 05:30:00 GMT+0530.
It is going to be transformed later right into a JavaScript date object.
// JSON string with date to JavaScript object
const jsonString = '{"animal":"Lion", "birthdate":"2014-11-25", "zoo":"Bronx Zoo"}';
const jsObject = JSON.parse(jsonString);
jsObject.birthdate = new Date(jsObject.birthdate);
console.log(jsObject.birthdate);
Output:
Tue Nov 25 2014 05:30:00 GMT+0530
JSON enter script with perform to JavaScript object
If a JSON script comprises a perform as its worth, the beneath code reveals the right way to parse the enter JSON. In an earlier tutorial, we’ve see many capabilities of JSON dealing with utilizing PHP.
It utilized JSON.parse as normal and get the scope of the perform by utilizing JavaScript eval(). The JavaScript object index will get the scope to entry the perform within the enter JSON string.
Notice: Utilizing the JS eval() is a nasty thought if you’re working with delicate information. So keep away from utilizing capabilities as a string inside a JS JSON enter.
// JSON string with a perform to JavaScript object and invoke the perform
const jsonString = '{"animal":"Lion", "birthdate":"2014-11-25", "id":"perform () {return 101;}"}';
const jsObject = JSON.parse(jsonString);
jsObject.id = eval("(" + jsObject.id + ")");
console.log(jsObject.id());
// additionally bear in mind that, if you move capabilities in JSON it can lose the scope
JSON.parse reviver to transform the date string to a JavaScript object
In a earlier instance, we parsed the date as a string after which transformed it right into a Date object.
As a substitute of changing the resultant Date string right into a Date object later, this program makes use of JSON.parse() with its reviver parameter.
The reviver parameter is a callback perform created beneath to transform the enter date right into a Date object.
Utilizing this methodology, the output Javascript object will embrace the date object as transformed by the reviver methodology.
// JSON string with a date to JavaScript object utilizing the reviver parameter of JSON.parse
const jsonString = '{"animal": "Lion", "birthdate": "2014-11-25", "zoo": "Bronx Zoo"}';
const jsObject = JSON.parse(jsonString, perform(key, worth) {
if (key == "birthdate") {
return new Date(worth);
} else {
return worth;
}
});
jsObject.birthdate = new Date(jsObject.birthdate);
console.log(jsObject.birthdate);
The reviver parameter is non-obligatory whereas utilizing the JSOM.parse perform. The callback outlined as a reviver will examine every merchandise of the enter JSON string.
