Question 257425 in Html Question posted in
Some basic documentation can be found here.

how to convert JSON DATA into html table

i tried using some example, but somehow it is not working. please guide me.

<html>
<head>
   <style>
      table, th, td {
         border: 1px solid black;
         border-collapse: collapse; 
      }
      td, th {
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Convert JSON data into a html table using Javascript</h2>
   <p>Click the following button to convert JSON results into HTML table</p><br>
   <button id="btn" onclick="convert( )"> Click Here </button> <br>
   <h3> Resulting Table: </h3>
   <div id="container"></div>
   <script>
        function convert() {
            // Sample JSON data
            let jsonData = {
                                "data":[
                                    {
                                        "customer Name": "ganesh",
                                        "ami":"T6767667",
                                        "state":"closed",
                                        "ssoId":"dhhhdhv",
                                        "convId":"I90098890098",
                                        "account number":"2233233"
                                    },
                                    {
                                        "customer Name": "putta",
                                        "ami":"T6767668",
                                        "state":"closed",
                                        "ssoId":"dhhhdhY",
                                        "convId":"I90098890099",
                                        "account number":"2233234"
                                    }
                                ],
                                "metadata":{
                                    "": "",
                                    "outcome":{
                                        "status":200,
                                        "code":0,
                                        "type":"OK",
                                        "message":""
                                    }
                                }
                            };
         
         let container = document.getElementById("container");
         let table = document.createElement("table");
         let cols = Object.keys(jsonData[0]);
         let thead = document.createElement("thead");
         let tr = document.createElement("tr");
         cols.forEach((item) => {
            let th = document.createElement("th");
            th.innerText = item; 
            tr.appendChild(th);
         });
         thead.appendChild(tr);
         table.append(tr)
         jsonData.forEach((item) => {
            let tr = document.createElement("tr");
            let vals = Object.values(item);
            
            vals.forEach((elem) => {
               let td = document.createElement("td");
               td.innerText = elem;
               tr.appendChild(td); 
            });
            table.appendChild(tr);
         });
         container.appendChild(table)
      }
   </script>
</body>
</html>
Tags:

3

Answers


  1. 0 
    <html>
<head>
   <style>
      table, th, td {
         border: 1px solid black;
         border-collapse: collapse; 
      }
      td, th {
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Convert JSON data into a html table using Javascript</h2>
   <p>Click the following button to convert JSON results into HTML table</p><br>
   <button id="btn" onclick="convert( )"> Click Here </button> <br>
   <h3> Resulting Table: </h3>
   <div id="container"></div>
   <script>
        function convert() {
            // Sample JSON data
            let jsonData = {
                                "data":[
                                    {
                                        "customer Name": "ganesh",
                                        "ami":"T6767667",
                                        "state":"closed",
                                        "ssoId":"dhhhdhv",
                                        "convId":"I90098890098",
                                        "account number":"2233233"
                                    },
                                    {
                                        "customer Name": "putta",
                                        "ami":"T6767668",
                                        "state":"closed",
                                        "ssoId":"dhhhdhY",
                                        "convId":"I90098890099",
                                        "account number":"2233234"
                                    }
                                ],
                                "metadata":{
                                    "": "",
                                    "outcome":{
                                        "status":200,
                                        "code":0,
                                        "type":"OK",
                                        "message":""
                                    }
                                }
                            };
         
         let container = document.getElementById("container");
         let table = document.createElement("table");
         let cols = Object.keys(jsonData.data[0]);
         let thead = document.createElement("thead");
         let tr = document.createElement("tr");
         cols.forEach((item) => {
            let th = document.createElement("th");
            th.innerText = item; 
            tr.appendChild(th);
         });
         thead.appendChild(tr);
         table.append(tr)
         jsonData.data.forEach((item) => {
            let tr = document.createElement("tr");
            let vals = Object.values(item);
            
            vals.forEach((elem) => {
               let td = document.createElement("td");
               td.innerText = elem;
               tr.appendChild(td); 
            });
            table.appendChild(tr);
         });
         container.appendChild(table);
         document.body.appendChild(container);
      }
   </script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    The code you provided seems almost correct, but there’s a small issue. You are trying to access jsonData[0], but jsonData is not an array, it’s an object with a "data" property that contains the array you want to iterate through. You should access jsonData.data to access the array.pls

    I’ve used jsonData.data to access the array of data objects, and I’ve also added <thead> for the table header row. Additionally, I’ve cleared the container before appending the table to ensure that the table updates when you click the button multiple times.

    Code Snippet

    function convert() {
  // Sample JSON data
  let jsonData = {
    "data": [{
        "customer Name": "ganesh",
        "ami": "T6767667",
        "state": "closed",
        "ssoId": "dhhhdhv",
        "convId": "I90098890098",
        "account number": "2233233"
      },
      {
        "customer Name": "putta",
        "ami": "T6767668",
        "state": "closed",
        "ssoId": "dhhhdhY",
        "convId": "I90098890099",
        "account number": "2233234"
      }
    ],
    "metadata": {
      "": "",
      "outcome": {
        "status": 200,
        "code": 0,
        "type": "OK",
        "message": ""
      }
    }
  };

  let container = document.getElementById("container");
  let table = document.createElement("table");
  let cols = Object.keys(jsonData.data[0]);
  let thead = document.createElement("thead");
  let tr = document.createElement("tr");
  cols.forEach((item) => {
    let th = document.createElement("th");
    th.innerText = item;
    tr.appendChild(th);
  });
  thead.appendChild(tr);
  table.appendChild(thead);

  jsonData.data.forEach((item) => {
    let tr = document.createElement("tr");
    let vals = Object.values(item);

    vals.forEach((elem) => {
      let td = document.createElement("td");
      td.innerText = elem;
      tr.appendChild(td);
    });
    table.appendChild(tr);
  });
  container.innerHTML = '';
  container.appendChild(table);
}
    table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td,
th {
  padding: 10px;
}
    <h2>Convert JSON data into an HTML table using JavaScript</h2>
<p>Click the following button to convert JSON results into an HTML table</p><br>
<button id="btn" onclick="convert()"> Click Here </button> <br>
<h3> Resulting Table: </h3>
<div id="container"></div>
    Login or Signup to reply.
  3. 0

    Yet another solution to create headers and rows from jsonData.data.

    Hope this helps!

    function convert() {
  // Sample JSON data
  const jsonData = {
    "data": [
      {
        "customer Name": "ganesh",
        "ami": "T6767667",
        "state": "closed",
        "ssoId": "dhhhdhv",
        "convId": "I90098890098",
        "account number": "2233233"
      },
      {
        "customer Name": "putta",
        "ami": "T6767668",
        "state": "closed",
        "ssoId": "dhhhdhY",
        "convId": "I90098890099",
        "account number": "2233234"
      }
    ],
    "metadata": {
      "": "",
      "outcome": {
        "status": 200,
        "code": 0,
        "type": "OK",
        "message": ""
      }
    }
  };

  // Get table reference
  const myTable = document.getElementById("container");

  Object.keys(jsonData.data[0]).forEach(property => {
    // Create headers
    const header = document.createElement("th");
    header.textContent = property;
    myTable.appendChild(header);
  });

  jsonData.data.forEach(item => {
    // Create rows
    const row = document.createElement("tr");
    myTable.appendChild(row);
    Object.keys(item).forEach(property => {
      const cell = document.createElement("td");
      cell.textContent = item[property];
      row.appendChild(cell);
    });
  });

}
    <html>
<head>
   <style>
      table, th, td {
         border: 1px solid black;
         border-collapse: collapse; 
      }
      td, th {
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Convert JSON data into a html table using Javascript</h2>
   <p>Click the following button to convert JSON results into HTML table</p><br>
   <button id="btn" onclick="convert( )"> Click Here </button> <br>
   <h3> Resulting Table: </h3>
   <div id="container"></div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search