如何在 html 表格中显示 JSON 数据答案

【问题标题】：How to display the JSON data in a html table如何在 html 表格中显示 JSON 数据
【发布时间】：2017-10-23 05:01:37
【问题描述】：

在这里，我使用 AJAX 调用从 API 获取 JSON 数据。我需要以 html 格式显示数据。谁能告诉我该怎么做？我的 JSON 数据如下所示：

"vjginteractive":{"signup_date_time":"2017-04-11 01:34:19","package_id":"2","total_leads":0},"vmlsingapore":{"signup_date_time":"2016-05-31 07:33:38","package_id":"2","total_leads":"not_available"},"vodkafashionindia":{"signup_date_time":"2016-03-17 18:15:48","package_id":"2","total_leads":0}

这是我尝试过的。如何以表格的形式显示公司名称、访问量和潜在客户？

$(document).ready(function()
  {
var X = [];
var Y = [];
var data = [];
function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'https://api.myjson.com/bins/nihnp', true);
    xobj.onreadystatechange = function() {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
        }
    }
    xobj.send(null);
}
loadJSON(function(response) {
    var response;
    var field=JSON.parse(response);
    var values=[];
    for (var i = 0; i < field.length; i++) {
        var $this=field[i];
        for (var key in $this) {
          if ($this.hasOwnProperty(key)) {
            var val = $this[key];
            values.push({"x":val.total_visits,"y":val.total_leads});
          }
        }
    }
});
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="chartContainer" style="height: 560px; width: 100%;"></div>
</head>

【问题讨论】：

你可以使用类似 JQuery 数据表的东西....datatables.net
我建议使用最新的 jQuery 3.2.1（不再支持 1.11.1）

标签： javascript jquery html json ajax

【解决方案1】：

您可以使用Object.keys 获取Object 的密钥，这将返回一个包含所有密钥的Array。然后你可以使用forEach 来迭代它们。

$(document).ready(function() {
  function loadJSON(callback) {
    const data = '{"vjginteractive":{"signup_date_time":"2017-04-11 01:34:19","package_id":"2","total_leads":0},"vmlsingapore":{"signup_date_time":"2016-05-31 07:33:38","package_id":"2","total_leads":"not_available"},"vodkafashionindia":{"signup_date_time":"2016-03-17 18:15:48","package_id":"2","total_leads":0}}';
    callback(JSON.parse(data));
  }

  loadJSON(function(response) {
    const $table = $('#chartContainer');
    Object.keys(response)
      .forEach((key) => {
        const field = response[key];
        $table.append(
          `<tr>
          <td>${field.signup_date_time}</td>
          <td>${field.package_id}</td>
          <td>${field.total_leads}</td>
          </tr>`);
      });
  });
});

td {
  border: 1px solid rgba(0, 0, 0, .2);
  padding: 5px 10px;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <table id="chartContainer"></table>
</head>

【讨论】：