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

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?

Answers:

Answer

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>')
            })
        });
    });
});
Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.