How do I iterate over a JSON array

Question

I'm loading the following json file from a url:

{
    "Airports": [
      {
        "listing": "East 34th Street Heliport",
        "iata": "TSS",
        "type": "heliport",
        "size": "tiny"
      },
      {
        "listing": "Blaine Municipal Airport",
        "iata": "BWS",
        "type": "closed",
        "size": "small"
      },
      {
        "listing": "Toronto City Airport",
        "iata": "YTZ",
        "type": "airport",
        "size": "medium"      
      },
      {
        "listing": "Amsterdam Airport Schiphol",
    "iata": "AMS",
        "type": "airport",
        "size": "large"      
       },
      {
        "listing": "Detroit County Airport",
        "iata": "DTW",
        "type": "airport",
        "size": "large"
      }
    ]
}

And I want to go through the Airports array and display all key names and values on the DOM. I do this in a .each() loop using jquery mobile :

    if(pageID == "page1"){
        var pageTitle="Error";
        //temp var to hold collapsible HTML 
        var colItem="";

        $.ajax({
        url:"some_url",
        method:"GET",
        cache:false,
        dataType:"json",
        success:function(data){

            pageTitle = (Object.keys(data)[0]).toUpperCase();


            $(data.Airports).each(function(index,value){                   

                //build all the needed collapsibles
                colItem += 
                        "<div data-role='collapsible'><h2>" 
                        + value.listing + 
                        "</h2> <p>" 
                        + + 
                        "</p> <p>" 
                        + + 
                        "</p> <p>" 
                        + + 
                        "</p></div>";

            });
        }            

    });

Is there a way to do this without referencing the key values such as what I have done using value.listing but instead iterate through it like an array an get all the values that way.

I'm looking for a final result similar to this:

 East 34th Street Heliport

iata       TSS
type       heliport
size       tiny

score 0 · Answer 1 · answered Apr 25 '18 at 06:23

You can do this way. Create HTML string dynamically and then add that to the main HTML page:

var jsonData = {
    "Airports": [
      {
        "listing": "East 34th Street Heliport",
        "iata": "TSS",
        "type": "heliport",
        "size": "tiny"
      },
      {
        "listing": "Blaine Municipal Airport",
        "iata": "BWS",
        "type": "closed",
        "size": "small"
      },
      {
        "listing": "Toronto City Airport",
        "iata": "YTZ",
        "type": "airport",
        "size": "medium"      
      },
      {
        "listing": "Amsterdam Airport Schiphol",
    "iata": "AMS",
        "type": "airport",
        "size": "large"      
       },
      {
        "listing": "Detroit County Airport",
        "iata": "DTW",
        "type": "airport",
        "size": "large"
      }
    ]
};

var nHTML = '';
jsonData.Airports.forEach(function(airport){
  var paragraph = '';
  paragraph+='<p>iata:   '+airport.iata+'</p>' + 
             '<p>type:   '+airport.type+'</p>' +
             '<p>size:   '+airport.size+'</p>';
  var colItem = '<div data-role="collapsible">' +airport.listing+ '<h2></h2>'+paragraph+'</div>';
  nHTML+=colItem;
});

$('#container').html(nHTML);

#container div{
  margin: 7px;
  background: grey;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'></div>

It is required that the key names such as iata, type, and size are loaded from the JSON file and not hard coded in. Also instead of referencing the key name such as airport.iata It is required that those values are called using a loop to go through and call all the key names. Some like. var keyNames = Object.keys(airport) and than use keyNames to call the keyValues. — JustAProgram, Apr 25 '18 at 16:06

score 0 · Answer 2 · answered Apr 26 '18 at 13:14

Here's a very simple JSFiddle of how you can do it:

https://jsfiddle.net/8euuoccf/

var jsonData = {
  "Airports": [{
      "listing": "East 34th Street Heliport",
      "iata": "TSS",
      "type": "heliport",
      "size": "tiny"
    },
    {
      "listing": "Blaine Municipal Airport",
      "iata": "BWS",
      "type": "closed",
      "size": "small"
    },
    {
      "listing": "Toronto City Airport",
      "iata": "YTZ",
      "type": "airport",
      "size": "medium"
    },
    {
      "listing": "Amsterdam Airport Schiphol",
      "iata": "AMS",
      "type": "airport",
      "size": "large"
    },
    {
      "listing": "Detroit County Airport",
      "iata": "DTW",
      "type": "airport",
      "size": "large"
    }
  ]
};

$(document).ready(function() {

    // Iterate over each airport
    jsonData.Airports.forEach(airport => {
      colItem = `<div data-role='collapsible'><h2>${airport.listing}</h2>`;

      // Iterate over each airport key
      Object.keys(airport).forEach(key => {
        colItem += `<p>${key}: ${airport[key]}</p>`;
      });
      colItem += '</div>';

      // Finally, append it to body
      var html = $.parseHTML(colItem);
      $('body').append(colItem);
    });
});

There are several ways to iterate over Object keys/values. Object.entries() is another option, but bear in mind it's not supported in IE. In this example I've used Object.keys() and then I access the corresponding value. If you want it in another format in the DOM (such as a table), take key and airport[key] and append them however you prefer.

How do I iterate over a JSON array

2 Answers2