如何在浏览器中显示解码的 JSON 数据

Question

我已成功从我开发的一个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]);
            
              }
            }
          }
        }

请帮助我在浏览器中显示数据时遇到问题。

注意：它只显示：带有数据的最后一个数组名称，即活动：

Answer 1

如果你想把它显示为表格，那么你可以试试这个：

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

        // Table row
        var tr = table.insertRow(-1);  

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

        // Adding Data
        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]];
            }
        }

        // appending whole table to the container
        var divContainer = document.getElementById("data");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }

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

Answer 2

它只显示最后一行，因为您使用的是 $.html()，它将在每次迭代中替换内容。您可以将其替换为如下所示的附加内容并检查结果。

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

PS：我已经在数据之间添加了 div，以便它呈现一个在另一个之下。

如果你只是在遍历一个数组，你也不应该使用 filter 方法。您可以使用 map 或 forEach 进行简单的迭代。