JavaScript: How to Get JSON value by Key

Here is a simple way to parse a JSON string and get a value by key

const rawData = `{
    "price":13300000,
    "area":7420,
    "bedrooms":4,
    "bathrooms":2,
    "stories":3,
    "airconditioning":true
}`;

let jsonData = JSON.parse(rawData);

let price = jsonData["price"];

If you print it out

console.log("the price is: " + price);

Will create the following output

the price is: 13300000

More ways below 👇

• by string key
• by key directly
• by unknown keys

The Data

Here is the data we will be using for this tutorial. It a small section for a machine learning housing dataset

[{"price":13300000,"area":7420,"bedrooms":4,"bathrooms":2,"stories":3,"airconditioning":true},
{"price":12250000,"area":8960,"bedrooms":4,"bathrooms":4,"stories":4,"airconditioning":true},
{"price":12250000,"area":9960,"bedrooms":3,"bathrooms":2,"stories":2,"airconditioning":false},
{"price":12215000,"area":7500,"bedrooms":4,"bathrooms":2,"stories":2,"airconditioning":true},
{"price":11410000,"area":7420,"bedrooms":4,"bathrooms":1,"stories":2,"airconditioning":true}]

Parsing JSON to Javascript Object

The first thing we need to do with our JSON data is convert it a Javascript object so that we can access the data in a structured way. All we need to do in this instance is call the JSON.parse method

let jsonData = JSON.parse(rawData);

Array

We can see that this JSON data starts and ends with square brackets [...] indicating that it is an array of data. So once it has been converted into a JS object we can access the elements by index (starting at 0) like so.

let firstObj = jsonData[0];

This will grab the first element

{
  "price":13300000,
  "area":7420,
  "bedrooms":4,
  "bathrooms":2,
  "stories":3,
  "airconditioning":true
}

If you want to access each element of the array look at the looping section of this post

JSON value by Key

String index

If you need to access an object via a variable name then using a string to access the JSON data could be what you are looking for.

let price = firstObj["price"];

//to print it out
console.log("price of first object is: " + firstObj["price"]);

will print out

price of first object is: 13300000

Key Directly

If you know what the name will be ahead of time you can just use the name directly on the JS object

let price = firstObj.price;

//to print it out
console.log("price of first object is: " + firstObj.price);

will print out

price of first object is: 13300000

Unknown Keys

If you do not know the keys ahead of time you can get the keys then access the objects.

let firstKey = Object.keys(firstObj)[0];
let firstKeyValue = firstObj[firstKey];

//to print it out
console.log("price of first object is: " + firstObj[firstKey]);

will print out

price of first object is: 13300000

Object.keys(firstObj)

will return

['price', 'area', 'bedrooms', 'bathrooms', 'stories', 'airconditioning']

so to get the first value price we will access it index 0

let firstKey = Object.keys(firstObj)[0];

will return

price

so finally to get the value of price we can do the following

let firstKey = Object.keys(firstObj)[0];
let firstKeyValue = firstObj[firstKey];

will return

13300000

Looping

If we wanted preform operations on all the elements in the array we have a few ways to do this. One of the most common is a forEach loop.

jsonData.forEach((element, i) => {
    console.log("element: " + i + " is: " + JSON.stringify(element))
});

• jsonData = JS object
• forEach = forEach method to loop over data
• (…) => {..}; = arrow function, it;s a shorter way to write an anonymous function
  • (element, i) = arguments to the arrow function
    • element = the individual elements of the array will be given to this function as this argument
    • i = index of the current array object

This will print out

element: 0 is: {"price":13300000,"area":7420,"bedrooms":4,"bathrooms":2,"stories":3,"airconditioning":true}
element: 1 is: {"price":12250000,"area":8960,"bedrooms":4,"bathrooms":4,"stories":4,"airconditioning":true}
element: 2 is: {"price":12250000,"area":9960,"bedrooms":3,"bathrooms":2,"stories":2,"airconditioning":false}
element: 3 is: {"price":12215000,"area":7500,"bedrooms":4,"bathrooms":2,"stories":2,"airconditioning":true}
element: 4 is: {"price":11410000,"area":7420,"bedrooms":4,"bathrooms":1,"stories":2,"airconditioning":true}

Fun Surprise

Congrats for making it all the way to the end! As a fun surprise you should inspect your js console (usually right click->inspect then find the console). You will see that this example ran while you where reading the page. Check the log output to see and have a great day!!!