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 <tr> for each one then create <td> elements for each property with the values as textContent — Phil
– Phil, Commented Mar 24, 2020 at 4:51
I think that is you want stackoverflow.com/questions/5180382/… — GotzJi
– GotzJi, Commented Mar 24, 2020 at 5:11

Phil · Accepted Answer · 2020-03-24 05:05:42Z

1

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

edited Mar 24, 2020 at 5:05

Phil

166k25 gold badges265 silver badges269 bronze badges

answered Mar 24, 2020 at 5:02

Melvin Witte

1699 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Over a year ago

No need for the CodePen, you can run JS code directly in Stack Snippets. I converted your code, hope you don't mind

Kostas Minaidis · Accepted Answer · 2020-04-03 20:45:58Z

0

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>

edited Apr 3, 2020 at 20:45

answered Apr 3, 2020 at 20:36

Kostas Minaidis

5,6814 gold badges21 silver badges31 bronze badges

Collectives™ on Stack Overflow

Display JSON from API url into a html table

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related