Display JSON from API url into a html table

Question

I'm currently trying to display JSON data as a table in a web page: the raw data from the API url looks like this:

{"body":"[{\"id\":\"67341472528\",\"name\":\"Dana Fin\"},{\"id\":\"87543263550\",\"name\":\"Jon Doe\"}]"}

I was trying to use the jQuery/AJAX $.getJSON() Method and it displays the data like this:

[{"id":"67341472528","name":"Dana Fin"},{"id":"87543263550","name":"Jon Doe"}]

but then I've been trying to put that data into a table for a while, I've tried a lot of things and examples but nothing has worked.

so basically I was wondering if somebody has done something like this, thanks

What have you tried? Is there anything in particular you're stuck on? The general idea would be to iterate each record in that array, create a `` for each one then create `` elements for each property with the values as `textContent` — Phil, Mar 24 '20 at 04:51
I think that is you want https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table — GotzJi, Mar 24 '20 at 05:11

score 1 · Answer 1 · edited Mar 24 '20 at 05:05

Try something like this:

// 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)

Here is a working CodePen

No need for the CodePen, you can run JS code directly in Stack Snippets. I converted your code, hope you don't mind — Phil, Mar 24 '20 at 05:06

Kostas Minaidis · Answer 2 · 2020-04-03T20:45:58.960

Using a slightly terser syntax:

// 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>

Display JSON from API url into a html table

2 Answers2