如何分离json数据的键并在表头中使用它[javascript或PHP]

严酷的苏塔尔

我有这个表,我正在做硬编码的表头,但我希望它按照 JSON 数据模式动态

例如,我的 JSON 数据如下

[
  {
    "adapterid": 44835,
    "rowid": 1573784208932,
    "battery": 3610,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -90,
    "temp": 25.75
  },
  {
    "adapterid": 44835,
    "rowid": 1573784212032,
    "battery": 3660,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -89,
    "temp": 25.75
  },
  {
    "adapterid": 44835,
    "rowid": 1573784215034,
    "battery": 3610,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -96,
    "temp": 25.75
  }
]

我想使用这个 JSON 数据生成表头

<thead>
    <th>adapterid</th>
    <th>rowid</th>
    <th>battery</th>
    <th>createddate</th>
    <th>gid</th>
    <th>id</th>
    <th>projectid</th>
    <th>rssi</th>
    <th>temp</th>
</thead>
马蒙

您可以使用Object.keys()从对象中获取所有键,然后遍历它们以形成标题。

演示:

var data = [
  {
    "adapterid": 44835,
    "rowid": 1573784208932,
    "battery": 3610,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -90,
    "temp": 25.75
  },
  {
    "adapterid": 44835,
    "rowid": 1573784212032,
    "battery": 3660,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -89,
    "temp": 25.75
  },
  {
    "adapterid": 44835,
    "rowid": 1573784215034,
    "battery": 3610,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -96,
    "temp": 25.75
  }
]
var header = Object.keys(data[0]);
var thead = document.querySelector('table thead tr');
header.forEach(function(th){
  thead.insertAdjacentHTML('beforeend', `<th>${th}</th>`)
})
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
<table>
    <thead>
      <tr></tr>
    </thead>
</table>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何从javascript数组对象/JSON获取数据并在React JS中使用它

如何在闪亮表头中使用符号?

读取 Json 数据并在角度组件中使用它

从JSON文件获取数据并在C#中使用它

从mysql提取数据并在javascript中使用它们

如何获取数据属性的值并在jquery中使用它?

AngularJS-我如何从json响应中提取两段数据并在select(combobox)中使用它们?

如何在TextBox中从用户获取所需的键并在Keyboard.isKeyDown(Key。“ ...”)中使用它

如何从一个页面获取JavaScript并在另一页面的php中使用它

在对象中传递键并在* ngFor中使用它

从 firestore 获取数据并转换为 json 并在工厂构造函数中使用它

将 js 数组发布到 PHP 并在数据库查询中使用它

从PHP将任意字符编码为json数组,并在Android中使用它们

JavaScript-从json对象创建文件并在FormData中使用它

将值保存在$ .get中的Javascript变量中,并在PHP变量中使用它

如何从Libre Office Calc中获取数据并在bash脚本中使用它?

如何从Redux存储中获取数据并在React Native的组件中使用它

如何为float类型定义资源并在`layout_constraintWidth_percent`的数据绑定中使用它?

如何每 2 分钟从 API 获取数据并在所有项目中使用它?

如何从异步存储中检索数据并在组件中使用它?

我如何获取数据并在viewdidload中使用它...不在函数内部?

如何仅一次获取数据并在联合查询中使用它

SQL如何获取XML数据列的值并在where子句中使用它

如何获取串行通信数据并在 C++ 中使用它?

如何从URL读取数据并在折线图中使用它?收到JAVAFX错误

如何从Observable检索数据并在拦截器中使用它?

如何传递数据类型并在Java方法中使用它?

我如何返回数组并在数据库的其他类中使用它

如何从车把循环中检索数据并在骨干模型中使用它?