🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

JavaScript JSON Object: Discover Best Tips

Reading time 3 min
Published Aug 10, 2017
Updated Oct 10, 2019

Understanding how you can manipulate and convert your data is crucial in any project. One of the most common ways of dealing with this problem is using universal formats.

Coders commonly use JavaScript JSON because it's easier: JSON is based on JavaScript.

After reading this tutorial, you'll be able to parse JSON text into a JavaScript object and use it in your daily tasks. You'll also understand JSON syntax, which you might find similar to writing JavaScript objects and arrays.

JavaScript JSON: Main Tips

  • JSON is a format you can use to store and transport data.
  • Most popular use of JSON is sending data from servers to web pages.
  • It's a resource-friendly format mainly used for working with data.

What JavaScript JSON is

  • The name of JSON stands for JavaScript Object Notation.
  • JSON is not dependent on the coding language.
DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Syntax of JSON

To get a better understanding of this data format, we will view a few JSON format examples. Let's get a few basic rules right first:

  • Data is put in pairs of name/value, then separated by commas.
  • Curly braces are used to contain objects.
  • Square brackets are used to contain JSON arrays.

For example, to describe the object employee, we'd use the JSON syntax below:

Example
"employee":[
    {"firstName":"Bob", "lastName":"Dilon"}, 
    {"firstName":"Ben", "lastName":"Aflik"},
    {"firstName":"Natalie", "lastName":"Kidmun"},
]

Note: JSON syntax originated from JavaScript object notation, yet the JSON format is a text-only format. It can be defined/written in various programming languages.

The data used with JSON is inserted as pairs of name/value. The pair of name/value has a field name, a colon and a value:

Example
"name":"Bob"

The objects of JSON are written within curly brackets. They can hold various pairs of name/value:

Example
{"firstName":"Bob", "lastName":"Doe"}

JSON arrays are written within square brackets. You can also have JSON array of objects:

Example
"employee":[
    {"firstName":"Bob", "lastName":"Dilon"}, 
    {"firstName":"Ben", "lastName":"Aflik"},
    {"firstName":"Natalie", "lastName":"Kidmun"},
]

JSON Object

A popular way of using JSON is to work with data from the web server and then display it on a web page. We will demonstrate this using a JSON format example with a string as our input.

First, we produce a JavaScript string holding the JSON syntax:

Example
var userData = '{ "employee" : [' +
'{ "firstName":"Bob" , "lastName":"Dilon" },' +
'{ "firstName":"Ben" , "lastName":"Aflik" },' +
'{ "firstName":"Natalie" , "lastName":"Kidmun" } ]}';

Then, by using the integrated JavaScript JSON.parse() function, we change the string to an object of JavaScript:

Example
var ob = JSON.parse(txt);

The last step is to work with the new object of JavaScript on the page:

Example
document.getElementById("example").innerHTML =
ob.employee[1].firstName + " " + ob.employee[1].lastName;

JavaScript JSON: Summary

  • You can use JSON to store and transport data.
  • JSON syntax is the same as the code for producing objects in JavaScript.
  • JavaScript programs can easily convert JSON array of objects into native objects of JavaScript.
  • JSON isn't dependent on the coding language.