What is JSON?
JSON stands for JavaScript Object Notation is an open stand file format for sharing data. Web developers easily write and understand the JSON file data. It helps exchange data between the browser(client) and server, that time JSON data must be in text based on key-value pairs. It use the .json extension when it is standing alone.
Why user JSON?
JSON using text format and its easy to understand,
it also sent to server and received from the server in readable format. Useful for any programming language like javascript, PHP, etc.
1. It’s Lightweight
2. Easy to write/ read
3. Language Independent
4. Integrated easily with most of the languages
5. Text based.
JSON Data Type
1. String : JSON String written in double qutoes.
2. Number : JSON Number be an integer and not written in double qutoes like string.
3. Object : JSON Object are written inside of curly ({ }) braces.
4. Array : JSON Array are written inside of square ([ ]) braces.
5. Boolean : Ture or False
6. Null : empty type
JSON Methods
JSON.parse
When using any Api or received data from web server, the comes alway into string. Using the JSON.parse the data translate or become into javascript object.
var json = ‘{“result”:true, “counting”:50}’;
var obj = JSON.parse(json);
console.log(obj.counting);
// browser console output: 50
JSON.stringify
JSON.stringify method that converts JavaScript Object or value to JSON string.
When data sending to a web server, the data has to a string. Converting into Object to string using JSON.stringify.
console.log(JSON.stringify({ x: 5, y: 6 }));
// Console output: “{“x”:5,”y”:6}”
JSON Example
{ "browsers": { "firefox": { "name": "Firefox", "pref_url": "about:config", "releases": { "1": { "release_date": "2004-11-09", "status": "retired", "engine": "Gecko", "engine_version": "1.7" } } } } }
JSON Online Format Tool
https://jsoneditoronline.org/
Keys and Values
Two primary parts that make JSON key and value.
Key: Alway a string, enclosed with double marks.
Value: It can be string, number, boolean expression array or object
JSON vs XML
JSON style:
{"students":[ {"name":"John", "age":"23", "city":"Agra"}, {"name":"Steve", "age":"28", "city":"Delhi"}, {"name":"Peter", "age":"32", "city":"Chennai"}, {"name":"Chaitanya", "age":"28", "city":"Bangalore"} ]}
XML style:
<students> <student> <name>John</name> <age>23</age> <city>Agra</city> </student> <student> <name>Steve</name> <age>28</age> <city>Delhi</city> </student> <student> <name>Peter</name> <age>32</age> <city>Chennai</city> </student> <student> <name>Chaitanya</name> <age>28</age> <city>Bangalore</city> </student> </students>
How can use JSON by Ajax?
If you fronted developer and you need to access any JSON data from a database API or a third-party library in your web application you can use $.ajax() method which is used in the jQuery library. Its can easily fetch and show data from a given API. Below is given the example.
var jqxhr = $.getJSON( "example.json", function() {console.log( "success" );}).done(function() {console.log( "second success" );}).fail(function() {console.log( "error" );}).always(function() {console.log( "complete" );});
Another method when you send or retrieve data from any JSON based API.
$.ajax({
dataType: 'json',
url: url,
data: data,
success: success
});