How to Get a Value from a JSON Array in JavaScript ?
We are going to iterate or access the value of a JSON array in JavaScript. There are several ways and techniques to access values from the JSON Array which are explained in detail below and are further divided into several possible techniques.
Table of Content
- Using the array[index] method
- Using the array[key] method
- Using the array.slice method
- Using for…of the loop
- Using forEach()
- Using the map() method
- Using filter() method
- Using the find() method
- Using findIndex() method
- Using some() method
- Using recursive traversal of JSON array
- Using the custom reduce method
- Using custom classes
Using the array[index] method
Accessing JSON array values using the numerical indexes. we can directly access the JSON array by accessing their indexes.
Example: Accessing values using the numerical index.
Javascript
let jsonArrayData = [ { "ComapnyName" : "w3wiki" , "Location" : "Noida" }, { "Courses" : "DSA self paced course" } ]; console.log(jsonArrayData[0]); // Accessing first element console.log(jsonArrayData[1]); // Accessing second element |
{ ComapnyName: 'w3wiki', Location: 'Noida' } { Courses: 'DSA self paced course' }
Using the array[key] method
Accessing JSON array values within the JSON array elements using specific corresponding keys.
Example: Accessing value using keys of the arrays.
Javascript
let jsonArrayData = [ { "ComapnyName" : "w3wiki" , "Location" : "Noida" }, { "topics" : [ "DSA self paced course" , "Machine learning" , "Web development" , "Block Chain" , "Artificial Intelligence" ] } ]; console.log(jsonArrayData[0][ "ComapnyName" ]); console.log(jsonArrayData[1][ "topics" ]); |
w3wiki [ 'DSA self paced course', 'Machine learning', 'Web development', 'Block Chain', 'Artificial Intelligence' ]
Using the array.slice method
Extracting JSON arrays portion of values using slice method. slice() method returns a new array containing a portion of the array on which it is implemented. The original remains unchanged.
Example: Using the slice method to access values.
Javascript
let fruitsJsonArray = [ "Kiwi" , "Apple" , "Mango" , "Guava" , "Dates" ]; let slicedJsonArray = fruitsJsonArray.slice(1, 5); console.log(slicedJsonArray); |
[ 'Apple', 'Mango', 'Guava', 'Dates' ]
Using for…of the loop
Accessing values from the JSON array by Iterating through each element of the JSON array. for…of statement iterates over the values of an iterable object (like Array, Map, Set, arguments object, …,etc), executing statements for each value of the object.
Syntax:
for ( variable of iterableObjectName) {
// code block to be executed
}
Example: Using for…of loop to access value.
Javascript
let jsonArray = [ { "ComapnyName" : "w3wiki" , "Location" : "Noida" }, { "Courses" : [ "DSA self paced course" , "DevOps Boot camp" , "GATE prepration course" ], "Topics" : [ "Web Devlopment" , "Machine Learning" , "Artifical Intelligence" ] } ]; for (let element of jsonArray) { console.log(element); } |
{ ComapnyName: 'w3wiki', Location: 'Noida' } { Courses: [ 'DSA self paced course', 'DevOps Boot camp', 'GATE prepration course' ], Topics: [ 'Web Devlopment', 'Machine Learnin...
Using forEach()
Extracting values from the JSON arrays by executing a function for each element of the array. forEach() method calls the provided function once for each element of the array. The provided function may perform any kind of operation on the elements of the given array.
Example: Using for Each() method to access values.
Javascript
let jsonArrayData = [ { "ComapnyName" : "w3wiki" , "Location" : "Noida" }, { "Courses" : [ "DSA self paced course" , "DevOps Boot camp" , "GATE prepration course" ], "Topics" :[ "Web Devlopment" , "Machine Learning" , "Artifical Intelligence" ] } ]; jsonArrayData.forEach( function (element){ console.log(element); }); |
{ ComapnyName: 'w3wiki', Location: 'Noida' } { Courses: [ 'DSA self paced course', 'DevOps Boot camp', 'GATE prepration course' ], Topics: [ 'Web Devlopment', 'Machine Learnin...
Using the map() method
Accessing values from the JSON array by creating a new modified array from the existing JSON array values. map() method creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method.
Example: Using map() method to access value.
Javascript
let jsonArray = [ { "ComapnyName" : "w3wiki" , "Location" : "Noida" }, { "Courses" : [ "DSA self paced course" , "DevOps Boot camp" , "GATE prepration course" ], "Topics" : [ "Web Devlopment" , "Machine Learning" , "Artifical Intelligence" , "Data Science" ] } ]; let modifiedArray = jsonArray.map((item) => { return item.ComapnyName ? item.ComapnyName.toUpperCase() : item.Courses.join( ", " ); }); console.log(modifiedArray); |
[ 'w3wiki', 'DSA self paced course, DevOps Boot camp, GATE prepration course' ]
Using filter() method
Extracting the values from the JSON array by creating a new array with the filtered elements from the original existing array. filter() Method is used to create a new array from a given array consisting of only those elements from the given array that satisfy a condition set by the argument method.
Example: Using filter() method to access values.
Javascript
let jsonArrayData = [ { "Name" : "w3wiki" , "Location" : "Noida" }, { "Courses" : [ "DSA self paced course" , "DevOps Bootcamp" , "GATE prepration course" ], "Topics" : [ "Web development" , "Artifical Intelligence" , "Machine Learning" , "Data Science" , "Algorithms" ] }, ]; let filteredArrayValues = jsonArrayData .filter(item => item.Name === "w3wiki" ) console.log(filteredArrayValues); |
[ { Name: 'w3wiki', Location: 'Noida' } ]
Using the find() method
Accessing the JSON array values with a first matching condition using the find() method.
Example: Using the find() method to access value from the array.
Javascript
let jsonArray = [ { "Name" : "w3wiki" , "Location" : "Noida" }, { "Courses" : [ "DSA self paced course" , "DevOps Bootcamp" , "GATE prepration course" ], "Topics" : [ "Web development" , "Artificial Intelligence" , "Machine Learning" , "Data Science" , "Algorithms" ] }, ]; let filteredJsonArrayValues = jsonArray .find(item => item.Name === "w3wiki" ); console.log(filteredJsonArrayValues); |
{ Name: 'w3wiki', Location: 'Noida' }
Using findIndex() method
findIndex() method is used to return the first index of the element in a given array that satisfies the provided testing function (passed in by the user while calling). Otherwise, if no data is found then the value of -1 is returned.
Example: Using the findIndex() method to access values.
Javascript
let jsonArrayValues = [ { "Name" : "w3wiki" , "Location" : "Noida" }, { "Courses" : [ "DSA self-paced course" , "DevOps Bootcamp" , "GATE preparation course" ], "Topics" : [ "Web development" , "Artificial Intelligence" , "Machine Learning" , "Data Science" , "Algorithms" ] } ]; let index = jsonArrayValues .findIndex(item => item.Name === "w3wiki" ); // Check if the item is found before trying to log it if (index !== -1) { console.log(jsonArrayValues[index]); } else { console.log( "Item not found" ); } |
{ Name: 'w3wiki', Location: 'Noida' }
Using some() method
Accessing those values from the JSON array where some of the conditions are met in the array. Some() method checks whether at least one of the elements of the array satisfies the condition checked by the argument method.
Example: Using some() method to access values from the array.
Javascript
let jsonArray = [ { "Name" : "w3wiki" , "Location" : "Noida" }, { "Courses" : [ "DSA self-paced course" , "DevOps Bootcamp" , "GATE preparation course" ], "Topics" : [ "Web development" , "Artificial Intelligence" , "Machine Learning" , "Data Science" , "Algorithms" ] } ]; let Item = null ; jsonArray.some(item => { if (item.Name === "w3wiki" ) { Item = item; // This will exit the loop once the item is found return true ; } }); if (Item !== null ) { console.log(Item); } else { console.log( "Item not found" ); } |
{ Name: 'w3wiki', Location: 'Noida' }
Using recursive traversal of JSON array
Accessing the values from the JSON array by creating the custom function for seamless navigation.
Example: Using recursive traversal for accessing values.
Javascript
function JsonArrayTraversal(object) { for (let key in object) { if ( typeof object[key] === 'object' ) { JsonArrayTraversal(object[key]); } else { console.log(object[key]); } } } let jsonArray = { "name" : "w3wiki" , "location" : "Noida" , "Courses" : [ "DSA self paced course" , "DevOps Bootcamp" , "GATE preparation course" ] }; JsonArrayTraversal(jsonArray); |
w3wiki Noida DSA self paced course DevOps Bootcamp GATE preparation course
Using the custom reduce method
Accessing values from the JSON array by using the custom reduced method. reduce() method in JavaScript is used to reduce the array to a single value and executes a provided function for each value of the array (from left to right) and the return value of the function is stored in an accumulator.
Example: Using the custom reduce method for accessing values from the JSON arrays.
Javascript
let jsonArrayData = [ { "name" : "w3wiki" , "location" : "Noida" }, { "course" : [ "DSA self paced course" , "DevOps Bootcamp" , "GATE preparation course" ] } ]; function customReduceMethod(arr, func, initialValue) { let accumulator = initialValue; for (let i = 0; i < arr.length; i++) { if (arr[i].name) { accumulator = func(accumulator, arr[i].name); } } return accumulator; } let data = customReduceMethod(jsonArrayData, (acc, val) => { return acc + val; }, '' ); console.log(data); |
w3wiki
Using custom classes
Extracting values from the JSON array by creating custom classes.
Example: Using custom classes for accessing values.
Javascript
class value { constructor(jsonArray) { this .jsonArray = jsonArray; } getValue(index) { return this .jsonArray[index]; } } // Example usage const jsonArray = [{ "name" : "w3wiki" , "Location" : "Noida" }, { "courses" : [ "DSA self paced" , "DevOps Boot camp" ] } ]; const myData = new value(jsonArray); console.log(myData.getValue(1)); |
{ courses: [ 'DSA self paced', 'DevOps Boot camp' ] }
Contact Us