Служба отдыха JSON в формате HTML Table

Question

У меня есть служба отдыха, которая возвращает данные ниже

{  
   "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.Как этого добиться?

Answer 1

Вы можете продолжить, создав функцию 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>