如何遍歷JSON數組

Question

我正在從URL加載以下json文件：

{
    "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"
      }
    ]
}

我想遍歷Airports數組，並在DOM上顯示所有鍵名和值。 我使用jquery mobile在.each（）循環中執行此操作：

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

            });
        }            

    });

有沒有一種方法，而不必引用鍵值，例如我使用value.listing完成的操作，而是像數組一樣遍歷它，以這種方式獲取所有值。

我正在尋找類似於以下內容的最終結果：

 East 34th Street Heliport

iata       TSS
type       heliport
size       tiny

Answer 1

您可以這樣做。 動態創建HTML字符串，然后將其添加到HTML主頁中：

 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> 

Answer 2

這是一個非常簡單的JSFiddle，它是如何實現的：

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);
    });
});

有幾種方法可以遍歷對象鍵/值。 Object.entries()是另一個選項，但是請記住，IE中不支持它。 在此示例中，我使用了Object.keys() ，然后訪問了相應的值。 如果要在DOM中以另一種格式（例如表）使用它，請選擇key和airport[key]並隨便添加它們。