How to Get a Value from a JSON Array in JavaScript ?
Last Updated :
02 Dec, 2024
There are several ways to access values from the JSON Array which are explained in detail below and are further divided into several possible techniques.
Using the Array[index] Method
Accessing JSON array values using the numerical indexes. we can directly access the JSON array by accessing their indexes.
JavaScript
let jsonArrayData = [
{
"ComapnyName": "GeeksforGeeks",
"Location": "Noida"
},
{
"Courses": "DSA self paced course"
}
];
console.log(jsonArrayData[0]); // Accessing first element
console.log(jsonArrayData[1]); // Accessing second element
Output{ ComapnyName: 'GeeksforGeeks', 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.
JavaScript
let jsonArrayData = [
{
"ComapnyName": "GeeksforGeeks",
"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"]);
OutputGeeksforGeeks
[
'DSA self paced course',
'Machine learning',
'Web development',
'Block Chain',
'Artificial Intelligence'
]
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.
JavaScript
let jsonArray = [
{
"ComapnyName": "GeeksforGeeks",
"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);
}
Output{ ComapnyName: 'GeeksforGeeks', Location: 'Noida' }
{
Courses: [
'DSA self paced course',
'DevOps Boot camp',
'GATE prepration course'
],
Topics: [ 'Web Devlopment', 'Machine Learnin... Using forEach() Method
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.
JavaScript
let jsonArrayData = [
{
"ComapnyName": "GeeksforGeeks",
"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);
});
Output{ ComapnyName: 'GeeksforGeeks', 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.
JavaScript
let jsonArray = [
{
"ComapnyName": "GeeksforGeeks",
"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);
Output[
'GEEKSFORGEEKS',
'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.
JavaScript
let jsonArrayData = [
{
"Name": "GeeksforGeeks",
"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 === "GeeksforGeeks")
console.log(filteredArrayValues);
Output[ { Name: 'GeeksforGeeks', Location: 'Noida' } ]
Using the find() Method
Accessing the JSON array values with a first matching condition using the find() method.
JavaScript
let jsonArray = [
{
"Name": "GeeksforGeeks",
"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 === "GeeksforGeeks");
console.log(filteredJsonArrayValues);
Output{ Name: 'GeeksforGeeks', 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.
JavaScript
let jsonArrayValues = [
{
"Name": "GeeksforGeeks",
"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 === "GeeksforGeeks");
// Check if the item is found before trying to log it
if (index !== -1) {
console.log(jsonArrayValues[index]);
} else {
console.log("Item not found");
}
Output{ Name: 'GeeksforGeeks', 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.
JavaScript
let jsonArray = [
{
"Name": "GeeksforGeeks",
"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 === "GeeksforGeeks") {
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");
}
Output{ Name: 'GeeksforGeeks', Location: 'Noida' }
Similar Reads
How to get Values from Specific Objects an Array in JavaScript ?
In JavaScript, an array is a data structure that can hold a collection of values, which can be of any data type, including numbers, strings, and objects. When an array contains objects, it is called an array of objects. Table of Content Using the forEach() methodUsing the map() methodUsing the filte
2 min read
How to get Values from HTML Input Array using JavaScript?
This problem can be solved by using input tags having the same "name" attribute value that can group multiple values stored under one name which could later be accessed by using that name. Syntaxlet input = document.getElementsByName('array[]');What is an Input Array in HTML?An "input array" in HTML
2 min read
How to Convert JSON to ArrayBuffer in JavaScript?
An ArrayBuffer is a complex data type, and structures which has a fixed length and takes binary content as the whole. Any variable that contains pure binary data will be defined in JavaScript as Simple Data, however on some occasions it is sometimes necessary to convert JSON data to an ArrayBuffer,
4 min read
How to get hidden field array values in javascript?
To retrieve values from hidden fields in JavaScript, you can use methods like querySelectorAll or getElementsByName to select these elements and extract their values. This can be useful for gathering data that isn't directly visible on a web page but still needs to be accessed or processed.Example U
2 min read
How to get a key in a JavaScript object by its value ?
To get a key in a JavaScript object by its value means finding the key associated with a specific value in an object. Given an object with key-value pairs, you want to identify which key corresponds to a particular value, often for searching or data retrieval.How to get a key in a JavaScript object
4 min read
Convert an Array to JSON in JavaScript
Given a JavaScript Array and the task is to convert an array to JSON Object. Below are the approaches to convert an array to JSON using JsvaScript: Table of ContentJSON.stringify() methodObject.assign() methodJSON.stringify() methodThe use of JSON is to exchange data to/from a web server. While send
2 min read
How to Get a List of Array Keys in JavaScript?
Here are the different methods to get a list of associative array keys in JavaScript1. Using JavaScript for each loopIn this method, traverse the entire associative array using a for each loop and display the key elements of the array. javascriptlet a = {Newton: "Gravity",Albert: "Energy",Edison: "B
3 min read
How to use forEach with an Array of Objects in JavaScript ?
Using the forEach() method with an array of objects in JavaScript is essential for iterating over collections and performing operations on each object. This guide explores effective techniques to utilize forEach() for array manipulation, enhancing your coding skills. Syntax: array.forEach( function(
3 min read
How to get the Value by a Key in JavaScript Map?
JavaScript Map is a powerful data structure that provides a convenient way to store key-value pairs and retrieve values based on keys. This can be especially useful when we need to associate specific data with unique identifiers or keys.Different Approaches to Get the Value by a Key in JavaScript Ma
3 min read
How to Get the Size of an Array in JavaScript
To get the size (or length) of an array in JavaScript, we can use array.length property. The size of array refers to the number of elements present in that array. Syntaxconst a = [ 10, 20, 30, 40, 50 ] let s = a.length; // s => 5 The JavaScript Array Length returns an unsigned integer value that
2 min read