如何在HTML表格中使用JavaScript对象

Question

I have 2 Javascript objects and I want to use their values as part of an HTML table.

The objects are in JSON format. Meaning each element looks like the following in my Javascript :

total[0] = {name: 'Total', y: '230'}
totalRenew[0] = {name: 'Renew Total', y: '30'}

I need to render their y values in a table like so:

<table style="position:absolute; z-index: 1000; margin-left: 25px; margin-top:400px;  width:20%">
 <th>Output (MW)</th>
 <tr></tr>
  <tr>
    <td><strong>Total</strong></td>
    <td>{$total[0].y}</td>
  </tr>
  <tr>
    <td><strong>Renewables</strong></td>
    <td>{totalRenew[0].y}</td>
  </tr>
</table> 

But this simply prints the actual text. These values are dynamic and will change every 5 minutes.

How do I reference a JavaScript element in an HTML table?

Answer 1

If you are not using a framework like Angular, use JavaScript to insert your values. Try this:

<table style="position:absolute; z-index: 1000; margin-left: 25px; margin-top:400px;  width:20%">
 <th>Output (MW)</th>
 <tr></tr>
  <tr>
    <td><strong>Total</strong></td>
    <td><span id="total"></span></td>
  </tr>
  <tr>
    <td><strong>Renewables</strong></td>
    <td><span id="totalRenew"></span></td>
  </tr>
</table> 

Javascript:

total[0] = {name: 'Total', y: '230'};
totalRenew[0] = {name: 'Renew Total', y: '30'};

document.getElementById('total').innerHTML = total[0].y;
document.getElementById('totalRenew').innerHTML = totalRenew[0].y;