HTML JS

CREATE HTML TABLE FROM JSON DATA

(quick guide & examples)

GENERATE TABLE HERE <div id="demoA"></div>

OBJECT ORIENTED TABLE (A)

01

PARSE JSON STRING INTO OBJECT var data = '{"Name":"Jon,"Email":"jon@doe.com"}'; data = JSON.parse(data);

OBJECT ORIENTED TABLE (B)

02

CREATE EMPTY TABLE var table = document.createElement ("table"), row, cellA, cellB; document.getElementById("demoA") .appendChild(table);

ROWS & CELLS for (let key in data) {   row = table.insertRow();    cellA = row.insertCell();   cellB = row.insertCell();   cellA.innerHTML = key;   cellB.innerHTML = data[key]; }

GENERATE TABLE HERE <div id="demoB"></div>

HTML STRING TABLE (A)

03

PARSE JSON STRING INTO OBJECT var data = '{"Name":"Jon,"Email":"jon@doe.com"}'; data = JSON.parse(data);

HTML STRING TABLE (B)

04

GENERATE TABLE HTML var table = "<table>"; for (let key in data) {   table += `<tr><td>${key}</td>   <td>${data[key]}</td></tr>`; } table += "</table>"; document.getElementById("demoB")   .innerHTML = table;