JavaScript JSON Array Revisited

JSON Array in JavaScript Revisited

In this article, we’ll discuss all about JavaScript JSON Array. We’ll see how to create a JSON object in JavaScript and converting it to JSON string. We’ll also see how to convert a JSON string back to JavaScript object for manipulation. JSON stands for JavaScript Object Notation. It is a text format which we normally use to exchange information between a client and server. It’s independent of the language you use and almost all languages support JSON.

Also read : How to Work With JSON Data in Python Flask

Given below is a sample JSON data:


{
    "employee": {
        "name": "jay",
        "personalDetail": {
            "age": "23",
            "weight": "58"
        }
    }
}

How to Create JSON array in JavaScript

When I was a beginner, I used to create JSON data by concatenation, which later I found was the worst method. It’s much easier to create JSON from a JavaScript object.
Suppose we need to send details of an employee entered from a form to server side. In order to proceed we first need to create a constructor function for our Employee as shown below:


function Employee(name, age, weight) {
    this.Name = name;
    this.age = age;
    this.weight = weight;
}

To create a JSON data format for the employee details, we need to create a new instance of the Employee function with the required details as shown below:


var employeeObject = new Employee('Jay',25,58);

Next is the main stuff where we need to convert our JavaScript employee object to JSON string. We’ll make use of theJSON.stringify function for this purpose.


JSON.stringify(employeeObject);

JSON.stringify converts the JavaScript object to JSON string. Here is the output of the above code:


{
    "Name": "Jay",
    "age": 25,
    "weight": 58
}

The above example showed the case of a single employee. When we have say multiple employees, that’s when JavaScript JSON array comes into the picture.
To handle multiple employee details we need to declare an array and then push each employee object into the array. And finally convert the whole JavaScript array to JSON string using JSON.stringify. Here is the code:


var employeeObject1 = new Employee('Jay', 25, 58);

var employeeObject2 = new Employee('Raj', 27, 64);

var employeeObject3 = new Employee('Roy', 21, 55);

arrayList.push(employeeObject1);
arrayList.push(employeeObject2);
arrayList.push(employeeObject3);

console.log(JSON.stringify(arrayList));

Here is the  output of the above code:


[{
    "Name": "Jay",
    "age": 25,
    "weight": 58
}, {
    "Name": "Raj",
    "age": 27,
    "weight": 64
}, {
    "Name": "Roy",
    "age": 21,
    "weight": 55
}]

How to Convert JSON String to JavaScript Object

When passing JSON object from server to client side, it would be required to parse the JSON object to JavaScript object. For that purpose we can use JSON.parse. To decode the above seen JavaScript JSON object to JavaScript object use JSON.parse as shown below:


var jsonData = JSON.stringify(arrayList);

var javascriptObject = JSON.parse(jsonData);

And here is JavaScript object:

JavaScript JSON Array Revisited - JSON Output
JavaScript JSON Array Revisited – JSON Output

Wrapping It Up

In this tutorial, we saw how to create JSON object in JavaScript, converting JSON object to JSON string and parsing back the JSON string to JSON object. For a more detailed info about JavaScript JSON Array have a look at the official docs.

Also read : Working with JSON data in ASP.NET