JSON stands for JavaScript Object Notation used to structure data based on JavaScript object syntax. JSON is small in size making it fast to transfer between server and client for transmission of information.
JSON is based on JavaScript but due to its capability, it is implemented by many other programming languages like C, PHP, Python, etc.
Also read: NodeJS Convert String To Int – A Step-by-Step Guide
A JSON string is a string containing JSON which is needed to change in another form that can operate by JavaScript and since the objects are best suited for JavaScript, it is recommended to convert a JSON String to JavaScript Object before performing any operations.
This tutorial will help you in converting a JSON String to a JavaScript Object.
Structure of JSON String
The structure of JSON is simpler and easy to read by humans. Below is a JSON string containing two keys, name and age, along with their value.
const JSONString = `{
"fullname": "Stardew Valley",
"age": 30
}`;
Structure of JavaScript Object
Below is a JavaScript Object with multiple key-value pairs.
const javascriptObject = {
fullName: 'Stardew Valley',
age: 30
}
Difference between JavaScript Object and JSON String
In JSON string the keys and value are wrapped inside double quotation marks (“) whereas in JavaScript it is not required to wrap the key and value inside double quotation marks instead you can write the key without having any type of quotation marks and wrap the value if it is a string inside single quotation marks (‘).
There is an exception that if the key has dashes (-), it must be wrapped inside single quotation marks (‘) to make it a valid JavaScript Object.
const javascriptObject = {
fullName: 'Stardew Valley',
age: 30,
'is-vegetarian': true,
}
Convert JSON String to JavaScript Object using JSON.parse()
There is a method JSON.parse() that can convert a JSON String into an Object Literals in JavaScript. This method takes a JSON string as an argument, converts it into a JavaScript Object, and returns it.
Syntax of JSON.parse()
JSON.parse(JSONString);
Example:
We have a JSON string containing multiple values.
const JSONString = `{
"fullname": "Stardew Valley",
"age": 30,
"is-vegetarian": true,
"hobbies": ["farming", "fishing", "mining", "foraging", "fighting"],
"address": {"street": "123 Main St", "city": "Pelican Town", "state": "California", "zip": "12345"},
"phone-numbers": [{"type": "home", "number": "123-456-7890"}, {"type": "work", "number": "123-456-7890"}]
}`;
Pass this as an argument to JSON.parse() method to convert it into a JavaScript Object.
const javascriptObject = JSON.parse(JSONString);
Print the returned Object in the console.
console.log(javascriptObject);
Complete Code to convert JSON to Javascript object
const JSONString = `{
"fullname": "Stardew Valley",
"age": 30,
"is-vegetarian": true,
"hobbies": ["farming", "fishing", "mining", "foraging", "fighting"],
"address": {"street": "123 Main St", "city": "Pelican Town", "state": "California", "zip": "12345"},
"phone-numbers": [{"type": "home", "number": "123-456-7890"}, {"type": "work", "number": "123-456-7890"}]
}`;
const javascriptObject = JSON.parse(JSONString);
console.log(javascriptObject);
Output:
{
fullname: 'Stardew Valley',
age: 30,
'is-vegetarian': true,
hobbies: [ 'farming', 'fishing', 'mining', 'foraging', 'fighting' ],
address: {
street: '123 Main St',
city: 'Pelican Town',
state: 'California',
zip: '12345'
},
'phone-numbers': [
{ type: 'home', number: '123-456-7890' },
{ type: 'work', number: '123-456-7890' }
]
}
Here you can see that the JSON string is successfully converted into a JavaScript Object.
Summary
JavaScript uses objects everywhere, and performing operations on it is easy than other forms of data structures. A JSON is also based on JavaScript object structure, it is less in size and easily understandable. It is used to store data and transmission on data from server to client.
JSON is used by many other programming languages which can convert it into a form that they can understand since JavaScript performs well with objects, so it is recommended to convert a JSON string into a JavaScript object before performing any other operations. There is a method JSON.parse() in JavaScript that takes a JSON string as an argument and return a JavaScript object. Hope this tutorial helps you in converting a JSON string to a JavaScript object.
Reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse