Пытаюсь запихнуть данные в таблицу с помощью ajax, но почему-то они не добавляются.
Код:
update_sensor_values();
var sensors_table = $('#sensors_view');
var info_table = $('#basic_view_table');
function update_sensor_values() {
fetch('api')
.then(res => res.json())
.then(data => {
console.log('data: ', data)
let wifi_name = data.wifi_name;
let rssi = data.rssi;
let uptime = data.uptime;
let battery_voltage = data.battery_voltage;
let normal_uptime = new Date(uptime * 1000).toISOString().substr(11, 8)
let sensor_values = data.sensors;
sensor_values.forEach((sensor) => {
sensors_table.append("<tr><td>" + sensor.name + "</td><td>" + sensor.temperature + "</td><td>" + sensor.himidity + "</td>" + sensor.heat_index + "</td></tr>");
});
info_table.append("<tr><td>" + battery_voltage + "</td><td>" + rssi + "</td><td>" + normal_uptime + "</td><td>" + wifi_name + "</td></tr>")
setTimeout(update_sensor_values, 2000);
})
.catch(e => {
console.log('Error: ', e);
setTimeout(update_sensor_values, 2000);
});
}
table {
width: 100%;
border-collapse: collapse;
border: 1px solid green;
margin: auto;
}
td,
th {
text-align: center;
border: 1px solid #dddddd;
padding: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html style="font-family: Helvetica;">
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<meta charset="utf-8">
<h1 style="text-align: center;"> Умный тупой подвал v0.1 beta </h1>
</head>
<body>
<div style="font-size:24px;">
<table id="sensors_view">
<tr>
<td>Название датчика</td>
<td>Температура</td>
<td>Влажность</td>
<td>По ощущениям</td>
</tr>
</table>
</div>
<div style="font-size:24px;">
<table id="basic_view_table">
<tr>
<td>Заряд аккумулятора</td>
<td>Уровень сигнала</td>
<td>Время работы</td>
<td>Подключен к wifi</td>
</tr>
</table>
</div>
</body>
</html>