Updated April 1, 2023
Introduction to Javascript Array to JSON
During data transfer from and to the web server, we can use a variety of data formats. However, the most frequently used and standard format is to transfer the data in JSON format to the web server and receive it in the same manner. The JSON format is often sent in curly braces {} and contains often key-value pairs which are separated with the help of commas. Today, we will learn how we can convert the array object of javascript to JSON format to send it for data transfer to and from the webserver.
The JSON format can be used when javascript is used at the client side for coding while server-side coding can be in any server-side programming language namely Java, Ruby, PHP, Python, etc. There are many other languages besides javascript that use JSON objects for data transfer and provide a library for the manipulation of JSON data.
Methods of Javascript Array to JSON
Two methods help us achieve our objective of converting an array to a JSON object. Let us learn the syntax of both of them.
- stringify() method
JSON.stringify(Object of Javascript)the object of javascript – It is any javascript object that you wish to convert to JSON. This method returns a JSON object in string format. The resultant object is said to be JSON- encoded, stringified object, serialized object or marshaled object.
- Object.assign() method
This method copies all the source objects to its target object.
Object.assign(targetObject, ...sourceObjects)targetObject – It is the resultant object which contains all the source object contents. SourceObjects – They are the objects whose content you wish to copy in the targetObject.
1. JSON.stringify() method
It is required to send the request data or get the response from or to the webserver to be in JSON string format. This javascript library provides a method named stringify() which converts the passed object to its corresponding JSON format. The array can also be converted to JSON using stringify() which will result in JSON string We will first study the stringify() method of JSON and JSON data representation format.
JSON encoded string or JSON object has the following points which should be noted –
- The strings are represented in a double quote. That means if your array object will contain any string closed in a single quote, it will automatically be converted to the string wrapped in double quotes.
- The keys or the objects are also converted to strings in the object-value pair of
- JSON supports primitive data types like string, boolean, numbers, and null along with array and objects.
Let us study with the help of example things which we have learned in the above points.
<!DOCTYPE html>
<html>
<body>
<h3>Demonstration to represent the JSON structure and supported datatypes by JSON</h3>
<p id="sampleDemo1"></p>
<p id="sampleDemo2"></p>
<script>
let coder = {
fullName: 'Payal Udhani', experience: 23,
married: false,
languages: ['java', 'javscript', 'php']
};
let resultantJson = JSON.stringify(coder);
document.getElementById("sampleDemo1").innerHTML = "Here's what we have got in result format "+typeof resultantJson;
document.getElementById("sampleDemo2").innerHTML = "Retrieved JSON is "+resultantJson;
</script>
</body>
</html>Output:
Function properties that are methods and symbolic properties along with the objects that store undefined are all skipped while converting Javascript object to JSON as JSON is a language-independent data representation format. Let us see that with the help of an
<!DOCTYPE html>
<html>
<body>
<h3>Demonstration to represent the things ignored when javscript object is converted to JSON</h3>
<p id="sampleDemo"></p>
<script>
let demoForJSON = {
greetings() { // method of function property is ignored while creating JSON
alert("Good Morning");
},
[Symbol("id")]: 987, // symbolic property is also ignored while creating JSON
temporaryObject: undefined // undefined objects are completely ignored while creating JSON
};
document.getElementById("sampleDemo").innerHTML="Resultant JSON string object is "+JSON.stringify(demoForJSON) ;
</script>
</body>
</html>Output:
Nested Objects are supported by JSON as well as Javascript arrays. Here, in the example, we have an address field that contains a nested
<!DOCTYPE html>
<html>
<body>
<h3>Demonstration to represent the JSON structure and supported datatypes by JSON</h3>
<p id="sampleDemo1"></p>
<p id="sampleDemo2"></p>
<script>
let coder = {
fullName: 'Payal Udhani', experience: 23,
married: false,
languages: ['java', 'javscript', 'php'], address:
{"street":23,
"city":'Satara', "pincode":415002}
};
let resultantJson = JSON.stringify(coder);
document.getElementById("sampleDemo1").innerHTML = "Here's what we have got in result format "+typeof resultantJson;
document.getElementById("sampleDemo2").innerHTML = "Retrieved JSON is "+resultantJson;
</script>
</body>
</html>Nested arrays are automatically converted to JSON.
Output:
We should make sure that there are no circular references which means that a certain object referring to other objects and that other objects finally refer to the original object which may contain intermediate
<!DOCTYPE html>
<html>
<body>
<h3>Create Object from JSON String Containg Circular Refernces</h3>
<p id="demo"></p>
<script>
let conferenceHalls = { hallNo: 15
};
let conference = {
title: "Future Connect By Acme ", specialGuest: ["Payal", "Komal"]
};
conference.location = conferenceHalls; // conference references conferenceHalls conferenceHalls.occupiedBy = conference; // conferenceHalls references conference
document.getElementById("demo").innerHTML = JSON.stringify(conference);
</script>
</body>
</html>Output:
2. Object.assign() method
This method copies all the source objects to its target object. When an array is one dimensional, in that case having a key for the converted JSON object is assigned by object.assign property which returns the JSON object which is further converted to JSON string with the help of JSON.stringify() method. Let us see an example of the same.
<!DOCTYPE html>
<html>
<body>
<h2>Demonstration to represent Object.assign() method along with JSON.stringify() in order to get the JSON from array.</h2>
<p id="sampleDemo1"></p>
<p id="sampleDemo2"></p>
<script>
let codersList = ['Payal','Komal','Nilesh','Rahul','Umesh'];
document.getElementById("sampleDemo1").innerHTML = "Initial array of coders "+codersList;
document.getElementById("sampleDemo2").innerHTML = "Retrieved JSON is "+JSON.stringify(Object.assign({}, codersList));
</script>
</body>
</html>Output:
Recommended Articles
This is a guide to Javascript Array to JSON. Here we discuss the Methods of Javascript Array to JSON along with the examples and outputs. You may also have a look at the following articles to learn more –
