JavaScript | JSON Arrays

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right






                        filter_none








Output:


Deadpool



Looping over an Array:

The for-in loop can be used for iterating through Array.


        
          
          
          
        

            










                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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> 



















                        chevron_right







                        filter_none








Output:


Deadpool
Hulk
Wolverine



Modifing an Array Values:

An index number can be used for modification of values.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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> 



















                        chevron_right







                        filter_none








Output:


Deadpool
Iron Man
Wolverine



Deleting Array Values:

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











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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> 



















                        chevron_right







                        filter_none








Output:


Deadpool
Hulk



Nested Arrays in JSON Objects:

In the nested array, another array can also be a value of an array.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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> 



















                        chevron_right







                        filter_none








Output:

Image



          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Image
letsLearnCode
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.


      
      
      
      

      

      
					
		

    Article Tags : 
JavaScript

           	
        

         

         
 
         
        Be the First to upvote.

                

        



        
        
        
        
        

    

            

            0
            

            

                             No votes yet.
                    

            
            
            
            
            
        

        
        

        

        

        

        

        

        


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.