Article Categories

Selected Reading

How to read data from JSON array using JavaScript?

Javascript Web Development Object Oriented Programming

JSON arrays are a common data structure in JavaScript applications. This article demonstrates various methods to read and access data from JSON arrays.

What is a JSON Array?

A JSON array is a collection of JSON objects enclosed in square brackets. Each object can contain multiple key-value pairs.

[
  {"name": "Rohan", "age": 22},
  {"name": "Shawn", "age": 12},
  {"name": "Michael", "age": 21}
]

Method 1: Using JSON.parse() and forEach()

The most common approach is parsing the JSON string and iterating through the array:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Array Reader</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 20px;
    }
    .sample {
        background-color: #f0f0f0;
        padding: 10px;
        margin: 10px 0;
        border-radius: 5px;
        font-family: monospace;
    }
    .result {
        background-color: #e8f5e8;
        padding: 10px;
        margin: 10px 0;
        border-radius: 5px;
        min-height: 50px;
    }
    button {
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }
</style>
</head>
<body>
<h1>Read data from JSON array using JavaScript</h1>
<div class="sample">
[{"name":"Rohan","age":22}, {"name":"Shawn","age":12}, {"name":"Michael","age":21}]
</div>
<div class="result"></div>
<button class="btn">Read JSON Data</button>

<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    let parsedJson = JSON.parse(sampleEle.innerHTML);
    
    document.querySelector(".btn").addEventListener("click", () => {
        resultEle.innerHTML = "<h3>JSON Array Data:</h3>";
        parsedJson.forEach((item, index) => {
            resultEle.innerHTML += `<p><strong>Person ${index + 1}:</strong> Name = ${item.name}, Age = ${item.age}</p>`;
        });
    });
</script>
</body>
</html>

Method 2: Accessing Specific Array Elements

You can access individual elements using array indices:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Access Specific Elements</title>
</head>
<body>
<h2>Access Specific JSON Array Elements</h2>
<div id="output"></div>

<script>
    let jsonString = '[{"name":"Rohan","age":22}, {"name":"Shawn","age":12}, {"name":"Michael","age":21}]';
    let jsonArray = JSON.parse(jsonString);
    let output = document.getElementById('output');
    
    // Access first person
    output.innerHTML = `<p>First person: ${jsonArray[0].name}, Age: ${jsonArray[0].age}</p>`;
    
    // Access last person
    let lastIndex = jsonArray.length - 1;
    output.innerHTML += `<p>Last person: ${jsonArray[lastIndex].name}, Age: ${jsonArray[lastIndex].age}</p>`;
    
    // Access middle person
    output.innerHTML += `<p>Middle person: ${jsonArray[1].name}, Age: ${jsonArray[1].age}</p>`;
</script>
</body>
</html>

Method 3: Using map() for Data Transformation

The map() method is useful when you need to transform the JSON data:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transform JSON Data</title>
</head>
<body>
<h2>Transform JSON Array Data</h2>
<div id="names-output"></div>
<div id="adults-output"></div>

<script>
    let jsonString = '[{"name":"Rohan","age":22}, {"name":"Shawn","age":12}, {"name":"Michael","age":21}]';
    let jsonArray = JSON.parse(jsonString);
    
    // Extract only names
    let names = jsonArray.map(person => person.name);
    document.getElementById('names-output').innerHTML = `<p>Names: ${names.join(', ')}</p>`;
    
    // Filter adults (age >= 18)
    let adults = jsonArray.filter(person => person.age >= 18);
    let adultNames = adults.map(adult => `${adult.name} (${adult.age})`);
    document.getElementById('adults-output').innerHTML = `<p>Adults: ${adultNames.join(', ')}</p>`;
</script>
</body>
</html>

Key Points

Always use JSON.parse() to convert JSON strings to JavaScript objects
Use forEach() for simple iteration without returning new data
Use map() when you need to transform data into a new array
Array indices start from 0 for direct element access
Combine filter() and map() for advanced data processing

Browser Compatibility

JSON.parse() is supported in all modern browsers including IE8+. Array methods like forEach(), map(), and filter() are supported in IE9+ and all modern browsers.

Conclusion

Reading JSON array data in JavaScript is straightforward using JSON.parse() combined with array methods. Choose forEach() for simple iteration, map() for data transformation, and direct indexing for accessing specific elements.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next