Get Value From JSON Object In JavaScript

Most of the data transaction between client and server is in form of JSON Object. We will see in this article how to get value from JSON object in JavaScript.

In modern web applications, we use JSON to send data between client and server because it is the lightweight data-interchange format. JSON is also used to store data locally.

Before sending JSON data to the server over an API we need to convert it into a string. In the same way server data you receive over API also need to be converted into a JSON object and then you can access the data.

Let's see how to get data from JSON object store locally or received over API in JavaScript.

Get Value From JSON Object Stored Locally

First, we will see how to get data from the JSON object stored locally in a variable.

Let the data be following:

var employee = `{
  "employee": {
    "name": "John",
    "age": 30,
    "salary": 5000,
    "city": "New York",
    "skills": ["JavaScript", "CSS", "HTML"]
  }
}`;

The data shown above is JSON data which is stored in a variable named employee.

Note: JSON data is a key: value pair separated by a comma, where the key is a string and value can be any valid data type like string, number, boolean, array, object, null, or undefined.

To get value from the JSON object stored locally, we need to convert it into a JSON object first because JSON data is stored in string format.

var data = `{
  "employee": {
    "name": "John",
    "age": 30,
    "salary": 5000,
    "city": "New York",
    "skills": ["JavaScript", "CSS", "HTML"]
  }
}`;
// current data type is string 'data'
console.log(typeof data);

// convert data into JSON object
var parsedData = JSON.parse(data);
console.log(typeof parsedData);

// get value from JSON object in JavaScript
console.log(parsedData.employee.name,
            parsedData.employee.age,
            parsedData.employee.skills);

The above code gets value from the JSON object stored locally and then prints the value in the console. The steps that we followed are:

1. Convert JSON data into JSON object by using JSON.parse() method.
2. The JSON string is now converted into the JSON object.
3. Get value from JSON object by using dot notation.

Looping Through JSON Object

Above we get individual values from the JSON object. But we can also get all the values from the JSON object by using a for-in loop.

It is the same as looping through an object in JavaScript.

var data = `{
  "employee": {
    "name": "John",
    "age": 30,
    "salary": 5000,
    "city": "New York",
    "skills": ["JavaScript", "CSS", "HTML"]
  }
}`;

// convert data into JSON object
var parsedData = JSON.parse(data);

// looping through JSON object
for(var key in parsedData.employee){
  console.log(key, parsedData.employee[key]);
}

The above code gets all the values from the JSON object and prints them in the console. The steps that we followed are:

1. Converted JSON data into JSON object by using JSON.parse() method. Now it can be treated as a normal JavaScript object.
2. Now, Loop through JSON object by using the for-in loop.

Get Value Using Bracket Notation

Above we accessed the value from the JSON object using dot notation but we can also access the value using bracket notation.

In the bracket notation, you have to pass the key of the value you want to access as a string.

Here is an example using bracket notation:

var data = `{
  "employee": {
    "name": "John",
    "age": 30,
    "salary": 5000,
    "city": "New York",
    "skills": ["JavaScript", "CSS", "HTML"]
  }
}`;

var parsedData = JSON.parse(data);

console.log(parsedData.employee["name"]);
console.log(parsedData.employee["age"]);
console.log(parsedData.employee["skills"]);

Data Received From Server

JSON data that we receive from the server is in form of a string. So to get values from this data string first we need to convert it into a JSON object.

Basically, there is no different process we will go through to get value. Again here we will use JSON.parse() method to convert a string into the JSON object and then will access the value.

// data recieved from server 
// '{"employee":{"name":"John","age":30,"salary":5000,"city":"New York","skills":["JavaScript","CSS","HTML"]}}';

var data = JSON.parse('{"employee":{"name":"John","age":30,"salary":5000,"city":"New York","skills":["JavaScript","CSS","HTML"]}}');

// geting value
console.log(data.employee.name);
console.log(data.employee.age);
console.log(data.employee.skills);

Get Value from Local JSON File

To get value first we need to read the local JSON file. We can do that by using the fetch() method.

Pass the URL of the JSON file as a string to fetch() method, it will return a promise. The promise will resolve with the JSON data as a string.

Here is a working example:

// get data from local JSON file
fetch('data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data.employee.name);
    console.log(data.employee.age);
    console.log(data.employee.salary);
  })

Same method you can use for any external JSON file too just pass the proper http URL.

Conclusion

This is the end of how to get value from JSON object in JavaScript. We have covered all ways that you can use different case scenarios. We have also covered how to get value from the local JSON files.