Working with JSON with Example in JavaScript

This JavaScript tutorial help to understand how to define JSON in JavaScript and how to parse JavaScript JSON data.

The JSON(JavaScript Object Notation) is a prominent shared data format for information sharing among two or several applications. It provides the easy usage of storage and data read data by JSON, JavaScript Object Notation, for which data information is stored as objects or arrays as an object.

I’ll be showing JSON data processing in Javascript and reading in JavaScript the JSON object array. In JavaScript, you may learn how to use and deal with JSON data. JSON is the popular xml alternative data format. JSON Data is a cross programming data format that is language-independent, so you don’t have to worry about languages, you just build and send JSON Data to any application for other programming languages.

You can also check other tutorials of JSON Object,

JSON data Manipulation Using Javascript

You can build JSON objects or arrays of JSON items using JavaScript or jquery. You can also store nested JSON data in variables.

How to Create JSON Object JavaScript

Define and use of json variable is very simple and easy.You need to define variable using var keyword and curly parenthesis {}. You can define a json object variable and store json data into variable as below:

var jsonObj = {}

Now you can add your key values json data into above java-script variable like below:

jsonObj = {
	"name" : "Adam",
	"age" : "30",
	"gender" : "male"
};

You can access above json object data using key value notation, like jsonObj.name, jsonObj.age etc.

How to define JSON object to array using JavaScript

You can define an array of JSON data, This type of data is very useful when you are using rest service or sending multiple objects to the server.

var jsonObjs = [{
    "name" : "adam",
    "age" : "30",
    "gender" : "male"
},
{
    "name" : "Roy",
    "age" : "21",
    "gender" : "male"
}];

How To Parse JSON Data in JavaScript

How to access these JSON object into your JavaScript code, its very simple you just iterate on objects array using foreach function, I am using jQuery foreach function:

$.each(jsonObjs, function( key, obj ) {
  console.log( key + ": " + obj.name );
});

How to use JSON Object in rest service

JSON data is very commonly used in Rest service due to cross programming independence, so publisher creates Rest Service and defines request and response parameters of rest service in JSON data format, Each server-side programming language has JSON encode and JSON decode function to convert JSON string data into useful array or list.

var jsonData = {
  group:employee
}
$.ajax(
    type:'GET',
    url:"https://example.abc.com/list",
	contentType: "application/json",
    data:jsonData,
    success:function(res) {
        alert(res);
    },
    dataType:'jsonp'
);

I am using contentType: "application/json" and dataType:'jsonp' params in ajax rest call to get and set data in ajax call for json format.I have also created jsonData variable and assigned request variable in json format.

Stringified JSON Using JavaScript

You can convert a JavaScript object into a string with JSON.stringify(). This helps to stringified json Object.

const obj = {employee_name: "John Dam", age: 30, salary: 2456};
const myJSON = JSON.stringify(obj);

Output:

{"employee_name":"John Dam","age":30,"salary":2456}

JavaScript Pretty Print JSON

We can also display JSON in an easy-to-read (for human readers) format.The pretty-printing is implemented natively in JSON.stringify(). The third argument enables pretty printing and sets the spacing to use:

var str = JSON.stringify(obj, null, 2); // spacing level = 2

pretty-print json data using tab character :

JSON.stringify(jsonobj,null,'\t')