JSON How To
JSON How To
A common use of JSON is to read data from a web server, and display the data in a web page.
For simplicity, this can be demonstrated by using a string as input (instead of a file).
JSON Example - Object From String
Create a JavaScript string containing JSON syntax:
var text = '{ "customers" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
var text = '{ "customers" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
JSON syntax is a subset of JavaScript syntax.
The JavaScript function JSON.parse(text) can be used to convert a JSON text into a JavaScript object:
var obj = JSON.parse(text);
Use the new JavaScript object in your page:
Example:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.customers[1].firstName + " " + obj.customers[1].lastName;
</script>
<script>
document.getElementById("demo").innerHTML =
obj.customers[1].firstName + " " + obj.customers[1].lastName;
</script>
Try it Yourself
Using eval()
Older browsers without the support for the JavaScript function JSON.parse() can use the eval() function to convert a JSON text into a JavaScript object:It is safer to use a JSON parser to convert a JSON text to a JavaScript object.
A JSON parser will recognize only JSON text and will not compile scripts.
In browsers that provide native JSON support, JSON parsers are also faster.
Native JSON support is included in all major browsers and in the latest ECMAScript (JavaScript) standard:
For older browsers, a JavaScript library is available at https://github.com/douglascrockford/JSON-js. https://github.com/douglascrockford/JSON-js
The JSON format was originally specified by Douglas Crockford. http://www.crockford.com/