Create multiple rows in HTML table using data from a JSON file

November 22, 2022

I’m trying to take data from a JSON file and create a html table, I am able to create the first row of the table using the below code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
    <table id='overview-table'>
      <tr>
        <th>owner Name</th>
        <th>date</th>
        <th>shares Held</th>
        <th>shares Change</th>
        <th>shares ChangePCT</th>
            <th>market Value</th>
      </tr>
      <tr>
        <td id='ownerName'></td>
        <td id='date'></td>
        <td id='sharesHeld'></td>
        <td id='sharesChange'></td>
        <td id='sharesChangePCT'></td>
            <td id='marketValue'></td>
      </tr>
    </table>
    <script type="text/javascript">
        const requestUrl = 'https://api.npoint.io/b15e98da7b057152618b';
        const requestJSON = async url => {
        
          const response = await (await fetch(url)).json();
          ownerName.innerHTML = response.ownerName[0];
          date.innerHTML = response.date[0];
          sharesHeld.innerHTML = response.sharesHeld[0];
          sharesChange.innerHTML = response.sharesChange[0];
          sharesChangePCT.innerHTML = response.sharesChangePCT[0];
              marketValue.innerHTML = response.marketValue[0];
        }
        requestJSON(requestUrl);
    </script>
</body>
</html>

The first row is created successfully, however if I want to include more rows then I would have to repeat the same bunch of code over again. Is there not a more efficient way of doing this?

Here is my JSON data:

{
    "ownerName":{
        "0":"VANGUARD GROUP INC",
        "1":"BLACKROCK INC.",
        "2":"BERKSHIRE HATHAWAY INC",
        "3":"STATE STREET CORP",
        "4":"FMR LLC",
        "5":"GEODE CAPITAL MANAGEMENT, LLC",
        "6":"PRICE T ROWE ASSOCIATES INC \/MD\/",
        "7":"MORGAN STANLEY",
        "8":"NORTHERN TRUST CORP",
        "9":"BANK OF AMERICA CORP \/DE\/"
    },
    "date":{
        "0":"09\/30\/2022",
        "1":"09\/30\/2022",
        "2":"09\/30\/2022",
        "3":"09\/30\/2022",
        "4":"09\/30\/2022",
        "5":"09\/30\/2022",
        "6":"09\/30\/2022",
        "7":"09\/30\/2022",
        "8":"09\/30\/2022",
        "9":"09\/30\/2022"
    },
    "sharesHeld":{
        "0":"1,272,378,901",
        "1":"1,020,245,185",
        "2":"894,802,319",
        "3":"591,543,874",
        "4":"350,900,116",
        "5":"279,758,518",
        "6":"224,863,541",
        "7":"182,728,771",
        "8":"176,084,862",
        "9":"142,260,591"
    },
    "sharesChange":{
        "0":"-4,940,153",
        "1":"-8,443,132",
        "2":"0",
        "3":"-6,634,650",
        "4":"6,582,142",
        "5":"1,502,326",
        "6":"-13,047,242",
        "7":"278,206",
        "8":"-3,744,060",
        "9":"-6,873,324"
    },
    "sharesChangePCT":{
        "0":"-0.387%",
        "1":"-0.821%",
        "2":"0%",
        "3":"-1.109%",
        "4":"1.912%",
        "5":"0.54%",
        "6":"-5.484%",
        "7":"0.152%",
        "8":"-2.082%",
        "9":"-4.609%"
    },
    "marketValue":{
        "0":"$192,498,204",
        "1":"$154,352,894",
        "2":"$135,374,643",
        "3":"$89,494,673",
        "4":"$53,087,679",
        "5":"$42,324,666",
        "6":"$34,019,605",
        "7":"$27,645,036",
        "8":"$26,639,879",
        "9":"$21,522,605"
    },

>Solution :

You can use a loop and duplicate a row template each time. Rather than using IDs for your table cells, you’ll want to use classes as they’ll be repeated throughout the document.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
    <table id='overview-table'>
      <tr>
        <th>owner Name</th>
        <th>date</th>
        <th>shares Held</th>
        <th>shares Change</th>
        <th>shares ChangePCT</th>
            <th>market Value</th>
      </tr>
      <tr id='rowTemplate'>
        <td class='ownerName'></td>
        <td class='date'></td>
        <td class='sharesHeld'></td>
        <td class='sharesChange'></td>
        <td class='sharesChangePCT'></td>
        <td class='marketValue'></td>
      </tr>
    </table>
    <script type="text/javascript">
        const requestUrl = 'https://api.npoint.io/b15e98da7b057152618b';
        const requestJSON = async url => {
        
          const response = await (await fetch(url)).json();
          const limit = Math.max(...Object.keys(response.ownerName)) + 1;
          for(let index = 0; index < limit; index++)
          {
              let newRow = rowTemplate.cloneNode(true);
              newRow.id = '';
              newRow.querySelector('.ownerName').innerHTML = response.ownerName[index];
              newRow.querySelector('.date').innerHTML = response.date[index];
              newRow.querySelector('.sharesHeld').innerHTML = response.sharesHeld[index];
              newRow.querySelector('.sharesChange').innerHTML = response.sharesChange[index];
              newRow.querySelector('.sharesChangePCT').innerHTML = response.sharesChangePCT[index];
              newRow.querySelector('.marketValue').innerHTML = response.marketValue[index];
              rowTemplate.parentNode.appendChild(newRow);
          }
          rowTemplate.parentNode.removeChild(rowTemplate); // Tidy up and remove the template
        }
        requestJSON(requestUrl);
    </script>
</body>
</html>