Как использовать объект javascript в таблице HTML

Question

У меня есть 2 Javascript объектов, и я хочу использовать их значения как часть таблицы HTML.

Объекты находятся в JSON формате. Значение каждого элемента выглядит следующим образом в моем Javascript:

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

мне нужно сделать их y значения в таблице следующим образом:

<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> 

Но это просто выводит фактический текст. Эти значения являются динамическими и будут меняться каждые 5 минут.

Как ссылаться на элемент JavaScript в таблице HTML?

Answer 1

Если вы не используете фреймворк, такой как Angular, используйте JavaScript для вставки ваших значений. Попробуйте это:

<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;