JavaScript

How to extract data from JSON in JavaScript

Learn how to extract data from json file into JavaScript file

In this tutorial, we will learn how we can extract data from a JSON file. But before moving to JSON we will first give a short overview of JSON and how it is different from the JavaScript object.

How to Extract Data from JSON in JavaScript:

What is JSON

JSON known as JavaScript Object Notation. It is a text-based data format for sharing and storing data. The JSON syntax is derived from JavaScript object and JSON can be used by many languages including PHP, Java, Ruby, Python, and JavaScript.

A JSON object can only be stored in its own file which used .json format. JSON is lightweight, easily readable and widely used as an alternative to XML and it requires much less formatting as compared to XML.

How JSON is different from JavaScript Object?

As mentioned above, JSON is derived from a JavaScript object and have so much resembled it. You can include all the basic data type in JSON that you can use in the JavaScript object like you can include strings, numbers, arrays, Booleans, and other JavaScript object literals. JSON rendered in curly braces and it looks something like this.

 

{
   "make": "Toyota",
   "name": "Aqua",
   "model": "2018",
   "color": "Yellow"
}

 

This is a very short example of JSON format, JSON could be long and could have many lines long. This simple JSON code starts and ends with curly braces and in between curly braces, there are many key-value pairs. Key-value pairs have a colon in between them. Each key-value pair is separated by a comma as you can notice in above example.

Keys exist on the left side of the colon and these keys should be consist of one of these six data type strings, numbers, objects, arrays, Booleans (true or false) and null. Every data type which will be passed to JSON will maintain their own syntax. The string will be written in quotes and number and Boolean data type will be written in their own format.

How does JSON object look like in JavaScript or HTML file?

Now let see how the JSON object can be written in JavaScript or HTML file.


Var car = {
    "make": "Toyota",
    "name": "Aqua",
    "model": "2018",
    "color": "Yellow"
}

 

So far, we have learned about JSON and its format and seen that how it looks different from the JavaScript object. Now we are going ahead and will see that how we can extract values from JSON file.

Create a JSON file:

Now the first thing we need to do is create a JSON file, to do that we need to open an editor that you have installed like I have VS code installed. So, I will open VS Code and create a JSON file. Here is the screenshot of our JSON file.

How to Extract data from JSON in Javascript

 

You can notice in the above screenshot that we have created a JSON file with name car.json and it contains data like car make, car name, car model etc.

Now if we want to access care name or color from JavaScript file so first we need to load JSON file in JavaScript using the require keyword. Here is the example below.

var car = require("./car.json");

So the first thing you need to do is create JavaScript file and Load JSON file using require. Then we can access the item by calling the file name which is the car in our scenario. Then we will write dot notation followed by the item we want to call like make, name model etc.

If we want to access car maker then we can access by writing car.make. Here is the demonstration below:

console.log("Car Maker: "+ car.make);

Output:

Car Maker: Toyota

Similarly, if we want access Car name, model and color then we can access through the following way.


var car = require("./car.json");
console.log("Car Maker: "+ car.make);
console.log("Car Name: "+ car.name);
console.log("Car Model: "+ car.model);
console.log("Car Color: "+ car.color);

Here is the output of the above code.

Output:

Car Maker: Toyota
Car Name: Aqua
Car Model: 2018
Car Color: Yellow

In this tutorial, we have given an overview of JSON. We have looked at how we can extract data from JSON in javascript and then we have seen that how it is different from the JavaScript object. We have also demonstrated that how we can access JSON object from JavaScript file.

Click to comment

Most Popular

To Top