获取JSON到HTML JavaScript表

我创建了一个新类别作为主表。问题是如何以以下格式将此JSON数据插入JavaScript HTML表：

{
  query: {
    count: 10,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  test1: {
    count: 16,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  bold: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  home: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  .....
}

如下表所示：

| Name | Count | Time | Language | Diag | 
------------------------------------------------------------- 
| query | 10 | 2015-12-09T17:12:09Z | en-US | 2 | 
| test1 | 16 | 2015-12-09T17:12:09Z | en-US | 2 | .....

---

类似的东西

这将基于JSON数据生成html标记。然后将其写入文档

风险值数据={ 查询：{ 计数：10， 创建日期：2015-12-09T17:12:09Z， 朗：恩，我们 }, 测试1：{ 计数：16， 创建日期：2015-12-09T17:12:09Z， 朗：嗯，我们， }, 粗体：{ 计数：1， 创建日期：2015-12-09T17:12:09Z， 朗：嗯，我们， }, 主页：{ 计数：1， 创建日期：2015-12-09T17:12:09Z， 朗：嗯，我们， } }; 设htmlStr=NameCountTimeLanguage； const keys=Object.keysdata； 对于键的var键{ 设项=数据[键]； htmlStr+=`${key}${item.count}${item.created}${item.lang}`； } htmlStr+=； document.writehtmlStr； 桌子{ 边界塌陷：塌陷； } 运输署{ 边框：1px纯黑；

---

} 首先，您需要在HTML中创建一个，对其应用一些样式。请参见下面的示例，您可以运行它

然后在数据集上运行一个循环，并向表中添加行

使用字符串文字将变量中的数据替换为rowHTML，也可以使用任何模板库为更干净的代码创建html模板

var myData={ 查询：{ 计数：10， 创建日期：2015-12-09T17:12:09Z， 朗：嗯，我们， 诊断：{}， }, 测试1：{ 计数：16， 创建日期：2015-12-09T17:12:09Z， 朗：嗯，我们， 诊断：{}， }, 粗体：{ 计数：1， 创建日期：2015-12-09T17:12:09Z， 朗：嗯，我们， 诊断：{}， }, 主页：{ 计数：1， 创建日期：2015-12-09T17:12:09Z， 朗：嗯，我们， 诊断：{}， } }; var myDataKeys=Object.keysmyData； var myTable=document.getElementByIdmyTable；

---

forvar i=0；我这里有一个简短的例子，可以帮助您理解原理，然后调整它以满足您的需要

常量源={ 查询：{ 计数：10， 创建日期：2015-12-09T17:12:09Z， 朗：恩，我们 }, 测试1：{ 计数：16， 创建日期：2015-12-09T17:12:09Z， 朗：恩，我们 }, 粗体：{ 计数：1， 创建日期：2015-12-09T17:12:09Z， 朗：恩，我们 }, 主页：{ 计数：1， 创建日期：2015-12-09T17:12:09Z， 朗：恩，我们 } } const keys=Object.keysource；//正确地记下名字 const colNames=Object.keysource[keys[0]]；//获取所有列名 //让我们先形成表格和标题 const table=document.createElement'table'； const header=document.createElement'tr'； header.innerHTML=`name` header.innerHTML+=colNames.mapname=>`${name}`.join； 表1.1标题； //现在让我们附加所有行 const rows=keys.mapkey=>{ const tr=document.createElement'tr'； tr.innerHTML=`${key}` tr.innerHTML+=colNames.mapname=>`${source[key][name]}`.join； 返回tr； }; rows.forEachr=>table.appendChildr； //渲染 document.body.appendChildtable； td，th{ 宽度：120px； 边框：1px纯黑；

---

} @Zac。我测试但不工作

$.ajax({
            url: 'https://www.zpool.ca/api/currencies',
            success: function(data) {
                let htmlStr = "<table><tr><td>Name</td><td>Count</td><td>Time</td><td>Language</td></tr>";
                const keys = Object.keys(data)
                for (var key of keys) {
                    let item = data[key];
                    htmlStr += `<tr><td>${key}</td><td>${item.algo}</td><td>${item.port}</td><td>${item.name}</td></tr>`;
                }
                htmlStr += "</table>";
                document.write(htmlStr);
            }
        });

---

你已经试过编码了吗？你必须基于json生成HTML。这需要迭代json对象条目并创建html元素或标记。没有神奇的函数可以将json转换为html表。在这种情况下，我需要一个javascript代码，可以将json数据定义到html表中。那么关于我所描述的above@borneo在本例中，我需要一个javascript代码，因此需要一个包含javascript的。JavaScript本身是不应该工作的，事实上它应该是不应该工作的，但是它应该是不应该工作的，否则你的操作界面会显示为一个要求为你完成工作的人。对不起，好吧，我明白你在说什么，除了我一直在从几个网站上挖掘之外。到目前为止，我只从ZingGrid Example xxx.js中找到了第三方的代码，如果我用url替换const source呢？你运行了这个代码段吗？到底是什么不起作用？如果我用url替换const source呢？来自的检查尝试使用fetch从url获取数据。然后，对接收到的数据使用上面的代码https://www.zpool.ca/api/currencies，success:function{}var data=getData；但不是为我工作。。顺便说一句，把var数据替换成url-ajax怎么样