How to use a javascript object in an HTML table

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?

no i just need to get the value represented in the table @RayonDabre — Barry_D_Dale
– Barry_D_Dale, Commented Oct 27, 2015 at 19:01

Barry_D_Dale · Accepted Answer · 2015-10-27 19:25:14Z

2

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;

edited Oct 27, 2015 at 19:25

Barry_D_Dale

1312 silver badges14 bronze badges

answered Oct 27, 2015 at 19:03

Tyler Jennings

8,9212 gold badges46 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use a javascript object in an HTML table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related