Вывести JSON из URL-адреса API в таблицу html

Question

В настоящее время я пытаюсь отобразить JSON данные в виде таблицы i

Answer 1

Попробуйте что-то вроде этого:

// response from $.getJson()
const data = [{
  "id": "67341472528",
  "name": "Dana Fin"
}, {
  "id": "87543263550",
  "name": "Jon Doe"
}]

const table = document.createElement('table')
table.border = 1

// create header row for table)
const header = document.createElement('tr')
const idHeader = document.createElement('th')
idHeader.appendChild(document.createTextNode('id'))
const nameHeader = document.createElement('th')
nameHeader.appendChild(document.createTextNode('name'))
header.appendChild(idHeader)
header.appendChild(nameHeader)
table.appendChild(header)

// create entries for each response
for (const entry of data) {
  const row = document.createElement('tr')
  const id = document.createElement('td')
  id.appendChild(document.createTextNode(entry.id))
  const name = document.createElement('td')
  name.appendChild(document.createTextNode(entry.name))
  row.appendChild(id)
  row.appendChild(name)
  table.appendChild(row)
}

document.querySelector('body').appendChild(table)

Вот рабочий CodePen

Answer 2

Использование более краткого синтаксиса:

// response from $.getJson()
const data = [{
  "id": "67341472528",
  "name": "Dana Fin"
}, {
  "id": "87543263550",
  "name": "Jon Doe"
}];

const header = `
  <tr>
    <th>ID</th>
    <th>NAME</th>
  </tr>
`

document.querySelector("#data").innerHTML = data.reduce(( innerHTML, { id, name }) => (
  
  `
    ${ innerHTML }
    <tr>
      <td>${ id }</td>
      <td>${ name }</td>
    </tr>
  `
  
), header );

table, tr, td {
  border-collapse: collapse;
  border: 1px solid;
  padding: 5px;
}

<table id="data"></table>