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\":         


        

Answer 1

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 2

I am not totally sure what you are asking for. The title of you post seems like you are looking for JSON.stringfy like mentioned in the previous answer but apparently you are not.

Are you trying to create and HTML list, ? Can you please try to explain your need again? I doubt what you are trying to do is complicated and I sure we can help you if you give a little more detail and purpose of what you are trying to do.

I am going to guess that you are trying to display HMTL by looping over you JSON object. Try this pure JavaScript example:

var fruits = JSON.parse('[{"key":"apple","value":1.90}, {"key":"berry","value":1.7}, {"key":"banana","value":1.5}, {"key":"cherry","value":1.2} ]');

var tbl = document.createElement('table');
var thead = document.createElement("thead");
var tbody = document.createElement("tbody")

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

var th_id = document.createElement("th");
var th_name = document.createElement("th");
var th_price = document.createElement("th");

th_id.textContent = "Id";
th_name.textContent = "Name";
th_price.textContent = "Price";

tr_head.appendChild(th_id);
tr_head.appendChild(th_name);
tr_head.appendChild(th_price);

thead.appendChild(tr_head);

for(var i = 0, j = fruits.length; i < j; i++) {
    var tr_body = document.createElement("tr");

    var td_id = document.createElement("td");
    var td_name = document.createElement("td");
    var td_value = document.createElement("td");

    td_id.textContent = i;
    td_name.textContent = fruits[i].key;
    td_value.textContent = fruits[i].value;

    tr_body.appendChild(td_id);
    tr_body.appendChild(td_name);
    tr_body.appendChild(td_value);

    tbody.appendChild(tr_body);
}


tbl.appendChild(thead);
tbl.appendChild(tbody);

 console.log(tbl);