如何在瀏覽器中顯示解碼的JSON資料

我已經成功地從我開發的 api URL 中獲取了資料，來自 api 的嵌套資料如下所示。

我已將結果記錄在控制臺日志中，并已成功獲取并格式化。

我試圖在瀏覽器中顯示格式化的資料，但并不缺乏。

單擊時的 HTML 按鈕操作

<button onclick="fetch();">Click</button>

在所有程序完成后，結果將顯示如下：

<div id="data"></div>

格式化資料：

let data = [
      {
        "id": 6,
        "Name": "Krakatoa",
        "Location": "USA",
        "History": "The 1883 eruption of Krakatoa",
        "Active": "dormant"
      },
      {
        "id": 7,
        "Name": "Krakatoa",
        "Location": "USA",
        "History": "The 1883 eruption of Krakatoa",
        "Active": "dormant"
      },
      {
        "id": 9,
        "Name": "Krakatoa",
        "Location": "KENYA",
        "History": "The 1883 eruption of Krakatoa",
        "Active": "dormant"
      },
      {
        "id": 10,
        "Name": "Krakatoa",
        "Location": "KENYA",
        "History": "The 1883 eruption of Krakatoa",
        "Active": "dormant"
      },
      {
        "id": 11,
        "Name": "Krakatoa",
        "Location": "AUSTRALIA",
        "History": "The 1883 eruption of Krakatoa",
        "Active": "dormant"
      }

]

格式化資料的程序：

    data.filter( item => {
      iterateObject(item);
    });
        function iterateObject(obj){
          for(prop in obj){
            if (typeof(obj[prop]) == "object") {
              iterateObject(obj[prop]);
              
            } 
        
            else {
              if (prop == "Name" || prop == "Location" || prop == "History" || prop == "Active") 
              {
                $('#data').html(prop.toUpperCase()   ': ', obj[prop]);
            
              }
            }
          }
        }

請幫助我在瀏覽器中顯示資料。

注意：它只顯示：帶有資料的最后一個陣列名稱，即活動：

uj5u.com熱心網友回復：

它只顯示最后一行，因為您使用的是 $.html()，它將在每次迭代中替換內容。您可以將其替換為如下所示的附加并檢查結果。

$('#data').append("<div>"   prop.toUpperCase()   ': ', obj[prop]   "</div>");

PS：我在資料之間添加了 div，以便它呈現一個低于另一個。

此外，如果您只是迭代陣列，則不應使用 filter 方法。您可以使用 map 或 forEach 進行簡單的迭代。

uj5u.com熱心網友回復：

如果要將其顯示為表格，則可以嘗試以下操作：

function fetch() {
        let data = [
      {
        "id": 6,
        "Name": "Krakatoa",
        "Location": "USA",
        "History": "The 1883 eruption of Krakatoa",
        "Active": "dormant"
      },
      {
        "id": 7,
        "Name": "Krakatoa",
        "Location": "USA",
        "History": "The 1883 eruption of Krakatoa",
        "Active": "dormant"
      },
      {
        "id": 9,
        "Name": "Krakatoa",
        "Location": "KENYA",
        "History": "The 1883 eruption of Krakatoa",
        "Active": "dormant"
      },
      {
        "id": 10,
        "Name": "Krakatoa",
        "Location": "KENYA",
        "History": "The 1883 eruption of Krakatoa",
        "Active": "dormant"
      },
      {
        "id": 11,
        "Name": "Krakatoa",
        "Location": "AUSTRALIA",
        "History": "The 1883 eruption of Krakatoa",
        "Active": "dormant"
      }

];
  
        var col = [];
        for (var i = 0; i < data.length; i  ) {
            for (var key in data[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // Creating table
        var table = document.createElement("table");

        var tr = table.insertRow(-1);  

        for (var i = 0; i < col.length; i  ) {
            var th = document.createElement("th"); 
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        for (var i = 0; i < data.length; i  ) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j  ) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = data[i][col[j]];
            }
        }

   
        var divContainer = document.getElementById("data");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }

<input type="button" onclick="fetch()" value="Click" />
<p id="data"></p>

標籤：javascript 查询 json 接口

上一篇：無法將影片從Blender匯出到Unity

下一篇：使用REACT從API獲取資料時沒有“Access-Control-Allow-Origin”標頭