Convert Javascript Array, Object to JSON with stringify()

This tutorial is going to be sole satisfying, no matter which programming language you work upon.

Ordinarily, a software developer has to play around with JSON Data on the daily basis to manage the information for the users.

So let us try to find out roughly what JSON is and why we started talking about it at the very beginning of this tutorial.

Indeed JSON is a big deal when we talk about dealing with data in the modern web, and mobile app development.

JSON is certainly the lightweight format for storing and exchanging the information (data) between client and server.

So what makes JSON so much exciting well because of the following reasons:

• Fully self-describing
• Extremely easy to understand
• Curly braces contain the objects
• Data is declared comma separated
• Square brackets include the arrays
• Data is defined in key/value pairs
• Similar format as JavaScript objects

Now, we have given enough introduction to JSON.

How to Convert Javascript Array To JSON with JSON.stringify() Method

Converting JavaScript array to JSON string object requires the companionship of JavaScript’s JSON.stringify() method.

As we know, JSON is usually helping us exchanging the data from the client-side to a remote server. So, when we have the JavaScript data in the Object form, it has to be in the string form to be sent to the webserver.

Exactly that is where JSON.stringify() method comes in handy,

It converts JavaScript simple or complex objects into a JSON string.

It is also very much useful in converting a JavaScript array into a JSON string.

Once the JavaScript object or array is converted into the string, then you have got the data in the form of JSON string, and we are ready to send this data to the server.

Have a look at the following example:

// index.js
let arr = [
  'Apple',
  'Guava',
  'Banana',
  'Apricot',
  'Blueberry',
  'Gooseberry',
  'Bing Cherry',  
  'Custard Apple'
]
jsonArrData = JSON.stringify(arr)
console.log(jsonArrData)
console.log(typeof jsonArrData === 'string')

Then we have got the following output:

# ["Apple","Guava","Banana","Apricot","Blueberry","Gooseberry","Bing Cherry","Custard Apple"]
# true

Let us find out what experiment we did above, we created a JavaScript array and poured some values in it indeed some fruit names.

Then we took out the JSON.stringify() method from JavaScript’s arsenal and converted the array data into the JSON string.

We make sure and checked if the declared value type is a string or not by using the typeof JavaScript keyword and then displaying the JSON data on the browser’s console.

So, we have got the data some fruit names along with true a boolean value in the console. This means our fruit names data is successfully converted into a string and waiting to be sent to the server.

Data can be sent to the server using HTTP request or Ajax request, and if you are a beginner, then i would suggest you must check out the following tutorial we recently created on:

Send data to the server using the HTTP request.
Send data to the server using the Axios library.

It is undoubtedly a very programmable way of doing this. Isn’t it?.

Converting JavaScript Object to String

In this step, we will focus on converting a JavaScript object into a JSON string using JSON.stringify() function.

Just the way we converted an array to a string, the same we will transform JavaScript object into string in the given below example.

// index.js
var obj = { 
  name: "John", 
  age: 32, 
  city: "California" 
};
stringData = JSON.stringify(obj)
console.log(stringData)
console.log(typeof stringData === 'string')

In the above example, we declared var obj and assigned some values to the object, and it included only some user data. The data structure is such which can is very much understandable even for a newbie.

Convert JavaScript Date Object to JSON

So far, we have looked into the various aspects of converting arrays and objects into JSON string. Now we are going to have a look at how to convert date objects into JSON string.

In JavaScript, date objects are not allowed in JSON format; however, we can do it with the same JSON.stringify() function.

Check out the example below:

// index.js
var obj = { 
  name: "Lynda",
  date: new Date()
};
var data = JSON.stringify(obj);
console.log(data)

// Result:
// {"name":"Lynda","date":"2019-12-25T23:22:42.472Z"}

We can even go one step further and use the toJSON method to convert a date object to a string. JSON dates follow the same pattern as the ISO-8601 standard: YYYY-MM-DDTHH:mm:ss.sssZ.

So what makes this toJSON is the excellent function? Well, it is supported by all the major browsers firefox, chrome, safari, and opera.

// index.js
var myDate = new Date();
var convertDate = myDate.toJSON();
console.log(convertDate)

// Result: 2019-12-25T23:33:00.095Z

You can see the JSON formatted result in the browser’s console.

Conclusion

Now we are going to end up our tutorial, which was on converting Javascript data types such as arrays, objects to JSON string.

The JSON.stringify method is one of the popular functions from the JS library that can be the big thing in itself. It is fully capable of converting JavaScript datatype(object, date object, arrays) into JSON string

I want to let you know that we have covered the topics in this tutorial:

• A brief introduction to JSON
• Converting Javascript Array To JSON
• Converting JavaScript Object to String
• Convert JavaScript Date Object to JSON

If you enjoyed this tutorial, don’t forget to share this tutorial with others, Happy coding.