How to parse a Json list like this and display its elements in HTML?

Question

I got an Json object by using jQuery's getjson() method like that:

<script>

$(document).ready(function(){

  $("button").click(function(){
    $.getJSON(the_api_url, {}, function(data) {
        // do something
    });
  });
  });

});

</script>

The data is an array list, and its format is like this:

[
    {
        id : "001",
        name : "apple",
        class : "fruit",
        colour : "red"
    },
    {
        id : "002",
        name : "melon",
        class : "fruit",
        colour : "green"
    },
    {
        id : "003",
        name : "banana",
        class : "fruit",
        colour : "yellow"
    }
]

I am new to JavaScript and don't know how to parse and display it in html page. Could you guys help me with the code in the '//do something' part?

look at api doc for dom manipulation api.jquery.com/category/manipulation/dom-insertion-inside — Arun P Johny
– Arun P Johny, Commented Aug 23, 2013 at 2:50
@ Arun P Johny. See you again:). I am learning it. could you give me a sample code? — Jane
– Jane, Commented Aug 23, 2013 at 2:53
refer to the code in stackoverflow.com/questions/4189365/… — tokkonopapa
– tokkonopapa, Commented Aug 23, 2013 at 2:54

Arun P Johny · Accepted Answer · 2013-08-23 03:10:18Z

4

Add a html element like

<ul id="ct"></ul>

then

$(document).ready(function(){

    $("button").click(function(){
        $.getJSON(the_api_url, {}, function(data) {
            var $ul = $('#ul')
            $.each(data, function(idx, item){
                $ul.append('<li style="color: ' + item.color + '">' + item.name + '-' + item['class'] +'</li>')
            })
        });
    });
});

edited Aug 23, 2013 at 3:10

answered Aug 23, 2013 at 2:57

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Thierry J Over a year ago

Would probably be useful to appendChild the lis to the ul :)

Neocortex Over a year ago

I am using .each but it's displaying only the last value.The .append is in a 2 nested .each.

jQuery.each(arrayobj, function(key, value){ jQuery.each(value, function(label, answer){ display = '<tr><td>'+label+ '</td><td>' +answer+'</td></tr>'}); }); $('#tbody').append(display);

Nikhil VJ · Accepted Answer · 2019-09-13 04:17:40Z

This generic function (vanilla Javascript, no external libraries) handles all json arrays; does not need you to configure the columns:

function makeTable(D){
  var a = '';
  cols = Object.keys(D[0]);
  a += '<table><thead><tr>';
  for(j=0;j<cols.length;j++) {
    a+= `<th>${cols[j]}</th>`;
  }
  a += '</tr></thead><tbody>';

  for(i=0;i<D.length; i++) {
    a += '<tr>';
    for(j=0;j<cols.length;j++) {
      a += `<td>${D[i][cols[j]]}</td>`;
    }
    a += '</tr>';
  }
  a += '</tbody></table>';
  return a;
}

Given your sample data,

D = [
    {
        id : "001",
        name : "apple",
        class : "fruit",
        colour : "red"
    },
    {
        id : "002",
        name : "melon",
        class : "fruit",
        colour : "green"
    },
    {
        id : "003",
        name : "banana",
        class : "fruit",
        colour : "yellow"
    }
];

Here is the output of makeTable(D):

<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>class</th>
            <th>colour</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>apple</td>
            <td>fruit</td>
            <td>red</td>
        </tr>
        <tr>
            <td>002</td>
            <td>melon</td>
            <td>fruit</td>
            <td>green</td>
        </tr>
        <tr>
            <td>003</td>
            <td>banana</td>
            <td>fruit</td>
            <td>yellow</td>
        </tr>
    </tbody>
</table>

You can use this site to preview HTML: https://www.onlinehtmleditor.net/ The original output is all in one line; I used an html formatter to format it.

mehdi · Accepted Answer · 2025-09-01 06:49:09Z

var data=[
    {
        id : "001",
        name : "apple",
        category : "fruit",
        color : "red"
    },
    {
        id : "002",
        name : "melon",
        category : "fruit",
        color : "green"
    },
    {
        id : "003",
        name : "banana",
        category : "fruit",
        color : "yellow"
    }
]


const createTable = (json) => {
  let table = document.getElementById('table')

  for (let row of json) {
    let newRow  = table.insertRow();
    for (let cell of Object.values(row)) {
      let newCell = newRow.insertCell();
      let newText  = document.createTextNode(cell);
      newCell.appendChild(newText);
    }     
  }
}

createTable(data)

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<table>
  <tbody id="table">
  <th>id</th>
  <th>name</th>
  <th>category</th>
  <th>color</th>
  </tbody>
</table>

Collectives™ on Stack Overflow

How to parse a Json list like this and display its elements in HTML?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related