时间戳

首页 > 解决方案 > JSON 休息服务转 HTML 表格格式

javascript - JSON 休息服务转 HTML 表格格式

问题描述

我有一个返回以下数据的休息服务

{  
   "items":[  
      {  
         "empno":8240,
         "ename":null,
         "job":null,
         "mgr":null,
         "hiredate":null,
         "sal":null,
         "comm":null,
         "deptno":null
      },
      {  
         "empno":8241,
         "ename":null,
         "job":null,
         "mgr":null,
         "hiredate":null,
         "sal":null,
         "comm":null,
         "deptno":null
      },
      {  
         "empno":7839,
         "ename":"QUEEN",
         "job":"PRESIDENT",
         "mgr":null,
         "hiredate":null,
         "sal":null,
         "comm":null,
         "deptno":10
      },
      {  
         "empno":7698,
         "ename":"BLAKE",
         "job":"MANAGER",
         "mgr":7839,
         "hiredate":"1981-05-01T00:00:00Z",
         "sal":2850,
         "comm":null,
         "deptno":30
      },
      {  
         "empno":7566,
         "ename":"JONES",
         "job":"MANAGER",
         "mgr":null,
         "hiredate":null,
         "sal":null,
         "comm":null,
         "deptno":20
      },
      {  
         "empno":7902,
         "ename":"FORDIAZ",
         "job":"ANALYST",
         "mgr":null,
         "hiredate":null,
         "sal":null,
         "comm":null,
         "deptno":20
      },
      {  
         "empno":7844,
         "ename":"TURNER",
         "job":"SALESMAN",
         "mgr":7698,
         "hiredate":"1981-09-08T00:00:00Z",
         "sal":1500,
         "comm":0,
         "deptno":30
      },
      {  
         "empno":666,
         "ename":"Damian",
         "job":null,
         "mgr":null,
         "hiredate":null,
         "sal":null,
         "comm":null,
         "deptno":null
      },
      {  
         "empno":8220,
         "ename":null,
         "job":null,
         "mgr":null,
         "hiredate":null,
         "sal":null,
         "comm":null,
         "deptno":null
      },
      {  
         "empno":8221,
         "ename":null,
         "job":null,
         "mgr":null,
         "hiredate":null,
         "sal":null,
         "comm":null,
         "deptno":null
      }
   ],
   "hasMore":false,
   "limit":0,
   "offset":0,
   "count":10,
   "links":[  
      {  
         "rel":"self",
         "href":"https://apex.oracle.com/pls/apex/oraclejet/emp/"
      },
      {  
         "rel":"edit",
         "href":"https://apex.oracle.com/pls/apex/oraclejet/emp/"
      },
      {  
         "rel":"describedby",
         "href":"https://apex.oracle.com/pls/apex/oraclejet/metadata-catalog/emp/"
      }
   ]
}

现在我只想拆分这些数据，并且需要将其显示为 HTML 表格格式。如何做到这一点？

标签： javascriptoracle

解决方案

您可以继续创建一个appendToTable()函数，该函数将使用正确的数据创建一个新行，然后将新创建的元素附加到表中。

然后，您可以遍历其余响应中包含的所有数据，并使用该函数将行一一追加到表中。

这是一个简短的片段，可以一瞥这是如何工作的：

const data = {
  "items": [{
      "empno": 8240,
      "ename": null,
      "job": null,
      "mgr": null,
      "hiredate": null,
      "sal": null,
      "comm": null,
      "deptno": null
    },
    {
      "empno": 8241,
      "ename": null,
      "job": null,
      "mgr": null,
      "hiredate": null,
      "sal": null,
      "comm": null,
      "deptno": null
    },
    {
      "empno": 8221,
      "ename": null,
      "job": null,
      "mgr": null,
      "hiredate": null,
      "sal": null,
      "comm": null,
      "deptno": null
    }
  ]
}

let appendToTable = function(empno, ename, job) {
  let table = document.querySelector('.dataTable');
  let newRow = document.createElement('tr');
  newRow.innerHTML = `
    <th>${empno}</th>
    <th>${ename}</th>
    <th>${job}</th>
  `;
  
  table.appendChild(newRow)
  return newRow

}

for (let item of data.items) {
  appendToTable(item.empno, item.ename, item.job)
}
<table class="dataTable">
  <tr>
    <th>Empno</th>
    <th>Ename</th>
    <th>Job</th>
  </tr>
</table>

推荐阅读