Create HTML table from JavaScript object

Question

I am a beginner of JavaScript and want to display an array of objects in HTML.

The format of the data is like this:

[
  {"key":"apple","value":1.90},
  {"key":"berry","value":1.7},
  {"key":"banana","value":1.5},
  {"key":"cherry","value":1.2}
]

I want to use a list with three columns (id, name, relevance) to display them. And the id can increase from 1 automatically.

Could anyone tell me how to write a javascript code to display it?

Please give me some materials or examples to learn.

Answer 1

Explanation

What you want is to fill a table (or another DOMElement) in HTML, with your JavaScript, which is executed dynamically once the page is loaded and your JSON object is received.

You want to loop through the object. The best way to do so would be with a for loop, and making sure our looping variable remains valid for the length of our object (all its attributes).

The best way to get the length of a JSON object is through myJSONObject.length: You select the keys of myJSONObject and return their count.

You can access the values stored in your JSON Object the following way, in your for loop (assuming the looping variable defined is named i): myJSONObject[i].theAttributeIWantToGet

---

Price formatting breakdown

Now, those prices need to have a proper format, don't they? So we'll check if any of the value attribute has less than 2 characters after the . within them. If they do, we add another decimal 0. We also add a $ before writing the formatted value. Here is a breakdown of how it works:

• obj[i].value.toString().substring(startIndex, length)

  • We want to check the length after the . sign, so our startIndex will be the position of this dot within our string.
  • obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'),length)
  • We now need to set the length. We want to find the length of all what's after the dot, so we'll take the length of the whole string just to be safe.

  • Final result: obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2

    • This will return true or false. If it's true: There's less than 2 digits after the dot !

  • We add the if statement and the last zero:

  • if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) obj[i].value += "0";

---

Also: Why I use innerHTML instead of appendChild().

---

Solution

JSFiddle

HTML

<table>
    <tbody id="tbody"></tbody>
</table>

JSON

[{
    "key": "apple",
    "value": 1.90
}, {
    "key": "berry",
    "value": 1.7
}, {
    "key": "banana",
    "value": 1.5
}, {
    "key": "cherry",
    "value": 1.2
}]

JavaScript

Note: The JSON object will be named obj in this instance.

var tbody = document.getElementById('tbody');

for (var i = 0; i < obj.length; i++) {
    var tr = "<tr>";

    /* Verification to add the last decimal 0 */
    if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) 
        obj[i].value += "0";

    /* Must not forget the $ sign */
    tr += "<td>" + obj[i].key + "</td>" + "<td>$" + obj[i].value.toString() + "</td></tr>";

    /* We add the table row to the table body */
    tbody.innerHTML += tr;
}

JSFiddle

Answer 2

It can be simply done by a small & smart process:

<table cellpadding="2" cellspacing="2" border="0" bgcolor="#dfdfdf" width="40%" align="center">
<thead>
    <tr>
        <th>Name</th>
        <th width="20%">Age</th>
        <th width="12%">Status</th>
    </tr>
</thead>
    <tbody id="tableData"></tbody>
</table>
<script type="text/javascript">
    var mainObj = [
        {
            name: "Kapil",
            age:  21,
            status: "Active"
        },
        {
            name: "John",
            age:  28,
            status: "Inactive"
        },
        {
            name: "Deos",
            age:  18,
            status: "Active"
        }
    ];
    var k = '<tbody>'
    for(i = 0;i < mainObj.length; i++){
        k+= '<tr>';
        k+= '<td>' + mainObj[i].name + '</td>';
        k+= '<td>' + mainObj[i].age + '</td>';
        k+= '<td>' + mainObj[i].status + '</td>';
        k+= '</tr>';
    }
    k+='</tbody>';
    document.getElementById('tableData').innerHTML = k;
    </script>

Answer 3

You can do something like this:

var table = document.createElement("table");

//Add a header
var header = document.createElement("tr");

var idHeaderCell = document.createElement("th");
var nameHeaderCell = document.createElement("th");
var relevanceHeaderCell = document.createElement("th");

header.appendChild(idHeaderCell);
header.appendChild(nameHeaderCell);
header.appendChild(relevanceHeaderCell);

table.appendChild(header);

//Add the rest of the data to the table
for(var i = 0; i < data.length; i++) {
    var id = (i + 1);
    var name = data[i].key;
    var relevance = data[i].value;

    var tr = document.createElement("tr");

    var idCell = document.createElement("td");
    var nameCell = document.createElement("td");
    var relevanceCell = document.createElement("td");

    idCell.appendChild(document.createTextNode(id));
    nameCell.appendChild(document.createTextNode(name));
    relevanceCell.appendChild(document.createTextNode(relevance));

    tr.appendChild(idCell);
    tr.appendChild(nameCell);
    tr.appendChild(relevanceCell);

    table.appendChild(tr);
}