RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/javascript/javascript-json-arrays/ below:

JavaScript | JSON Arrays - GeeksforGeeks

JavaScript | JSON Arrays

Last Updated : 28 May, 2021

The JSON Arrays is similar to JavaScript Arrays.

Syntax of Arrays in JSON Objects:

// JSON Arrays Syntax

{
    "name":"Peter parker",
    "heroName": "Spiderman",
    "friends" : ["Deadpool", "Hulk", "Wolverine"]
}

Accessing Array Values:
The Array values can be accessed using the index of each element in an Array.

HTML


 <!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>

    <p id="paraId"></p>


    <script>
        var spidermanDetail = {
            "name": "Peter parker",
            "heroName": "Spiderman",
            "friends": ["Deadpool", "Hulk", "Wolverine"]
        };

        var x = spidermanDetail.friends[0];
        document.getElementById("paraId").innerHTML = x;
    </script>
</body>

</html>

Output:

Deadpool

Looping over an Array:
The for-in loop can be used for iterating through Array.

HTML


 <!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>

    <p id="paraId"></p>


    <script>
        var str = "";
        var spidermanDetail = {
            "name": "Peter parker",
            "heroName": "Spiderman",
            "friends": ["Deadpool", "Hulk", "Wolverine"]
        };

        for (i in spidermanDetail.friends) {
            str += spidermanDetail.friends[i] + "<br/>";
        }

        document.getElementById("paraId").innerHTML = str;
    </script>
</body>

</html>

Output:

Deadpool
Hulk
Wolverine

Modifying an Array Values:
An index number can be used for the modification of values.

HTML


 <!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>

    <p id="paraId"></p>


    <script>
        var str = "";
        var spidermanDetail = {
            "name": "Peter parker",
            "heroName": "Spiderman",
            "friends": ["Deadpool", "Hulk", "Wolverine"]
        };

        spidermanDetail.friends[1] = "Iron Man";

        for (i in spidermanDetail.friends) {
            str += spidermanDetail.friends[i] + "<br/>";
        }

        document.getElementById("paraId").innerHTML = str;
    </script>
</body>

</html>

Output:

Deadpool
Iron Man
Wolverine

Deleting Array Values:
The values of an Array can be deleted using delete keyword.

HTML


 <!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>

    <p id="paraId"></p>


    <script>
        var str = "";
        var spidermanDetail = {
            "name": "Peter parker",
            "heroName": "Spiderman",
            "friends": ["Deadpool", "Hulk", "Wolverine"]
        };

        delete spidermanDetail.friends[2];

        for (i in spidermanDetail.friends) {
            str += spidermanDetail.friends[i] + "<br/>";
        }

        document.getElementById("paraId").innerHTML = str;
    </script>
</body>

</html>

Output:

Deadpool
Hulk

Nested Arrays in JSON Objects:
In the nested array, another array can also be a value of an array.

HTML


 <!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>

    <p id="paraId"></p>


    <script>
        var str = "";
        var spidermanDetail = {
            "name": "Peter parker",
            "heroName": "Spiderman",
            "friends": [{
                "heroName": "Deadpool",
                "skills": ["Martial artist", "Assassin"]
            }, {
                "heroName": "Hulk",
                "skills": ["Superhuman Speed", "Superhuman Strength"]
            }, {
                "heroName": "Wolverine",
                "skills": ["Retractable bone claws", "Superhuman senses"]
            }]
        };

        for (i in spidermanDetail.friends) {
            str += "<h3>" + spidermanDetail.friends[i].heroName + "</h3>";
            for (j in spidermanDetail.friends[i].skills) {
                str += spidermanDetail.friends[i].skills[j] + "<br/>";
            }
        }

        document.getElementById("paraId").innerHTML = str;
    </script>
</body>

</html>

Output:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4