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"]);

Output

GeeksforGeeks
[
  '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.