[英]Get Data from API response and show in table
I am trying to create a table which displays updates in intervals by using ajax calls to get the data from the server. 我正在尝试创建一个表,该表通过使用ajax调用从服务器获取数据来定期显示更新。
I am trying to get the data from my server and update my table view with the new data. 我正在尝试从服务器中获取数据,并使用新数据更新表视图。
this is my Javascript function. 这是我的Javascript函数。
function updateSlaveTable() {
fetch('{{route(' pusher ')}}', {
method: 'post',
mode: 'cors',
headers: {
'Content-Type': 'application/json', // sent request
'Accept': 'application/json' // expected data sent back
},
body: JSON.stringify({
"mac": "{{$slaves['mac']}}"
})
})
.then((res) => res.json())
.then(function(res) {
//alert(JSON.stringify(res));
//setInterval(updateSlaveTable, 1000)
$.getJSON("res.json", function(slaves) {
var slave_data = '';
$.each(res.slave_id, function(key, value) {
// if(value.type == "door_sensor")
//{
slave_data += '<tr>';
slave_data += '<td>' + value.name + '</td>';
slave_data += '<td>' + value.slave_id + '</td>';
slave_data += '<td>' + value.type + '</td>';
slave_data += '<td>' + value.status + '</td>';
slave_data += '<td>' + value.value + '</td>';
slave_data += '<td>' + value.mode + '</td>';
slave_data += '<td>' + value.name1 + '</td>';
slave_data += '<td>' + value.name2 + '</td>';
slave_data += '<td>' + value.name3 + '</td>';
slave_data += '<td>' + value.name4 + '</td>';
slave_data += '<td>' + value.s1 + '</td>';
slave_data += '<td>' + value.s2 + '</td>';
slave_data += '<td>' + value.s3 + '</td>';
slave_data += '<td>' + value.s4 + '</td>';
slave_data += '<td>' + value.voltage + '</td>';
slave_data += '<td>' + value.temp + '</td>';
slave_data += '<td>' + value.hum + '</td>';
slave_data += '</tr>';
// }
});
$('#slave_table').append(slave_data);
});
});
})
.catch(function(error) {
// alert(error);
// setInterval(updateSlaveTable, 1000); // <-- there was a network problem,
// but still, program the next one!
})
}
updateSlaveTable();
I get the data correctly to the function. 我正确地将数据获取到该函数。 The Response is below
回应如下
{
"3":
{"value":"in value same","status":"in status same","volt":"in volt same"},
"4":
{"value":"in value same","status":"in status same","volt":"in volt same"},
"5":
{"status":"in status same","temp":"in temp same","hum":"in humidity same","volt":"in volt same"},
"6":
{"status":"in status same","volt":"in volt same"},
"7":
{"status":"in status same","s1":"in s1 same","s2":"in s2 same","s3":"in s3 same"},
"9":
{"status":"in status same","temp":"in temp same","hum":"in humidity same","volt":"in volt same"},
"10":
{"value":"in value same","status":"in status same","volt":"in volt same"},
"message":"no Change"
}
I have little experience in JavaScript so please do not mind the simple question 我没有JavaScript方面的经验,所以请不要介意这个简单的问题
If your data in res
what I saw below, then the $.each(res.slave_id,...
is not valid, because the res
hasn't slave_id property. Your keys are numbers, so you can iterate them with Object.keys(res).map(key => res[key]).forEach(obj => console.log(obj))
. 如果您在
res
看到的数据如下所示,则$.each(res.slave_id,...
无效,因为res
没有slave_id属性。您的键是数字,因此可以使用Object.keys(res).map(key => res[key]).forEach(obj => console.log(obj))
对其进行迭代Object.keys(res).map(key => res[key]).forEach(obj => console.log(obj))
。
After the map, you'll get an object array, this values can be the table rows. 映射之后,您将获得一个对象数组,该值可以是表行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.