Javascript 从API响应中获取数据并显示在表中

我试图创建一个表，通过使用ajax调用从服务器获取数据，每隔一段时间显示更新

我正在尝试从服务器获取数据，并用新数据更新表视图

这是我的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();

---

我对JavaScript几乎没有经验，所以请不要介意这个简单的问题，如果你的数据在

res

中看到了下面的内容，那么

$。每个（res.slave_id，

都是无效的，因为

res

没有slave_id属性。你的键是数字，所以你可以用

Object.keys（res.map）（key=>res[key]).forEach（obj=>console.log（obj））

---

映射之后，您将获得一个对象数组，该值可以是表行。

“我将数据正确地传递给函数”。您的代码包含两个ajax调用：一个由fetch（）调用，另一个由$.getJSON（）调用。以下哪一项是您的示例数据？您正面临什么问题？运行代码时代码中出现了什么错误？共享的输出来自fetch（）。现在没什么不对的。实际上，我想做的只是显示我想附加到表中的数据，而不是使用alert。这就是为什么我试图使用getJson获取数据并在表中显示。因此，我只想在表中显示输出。如果没有错，那么为什么要问？您有一些代码试图创建表数据…可能它没有达到您想要的效果？那么，请描述出哪里出了问题。我猜循环不起作用，因为我在结果中看不到任何

slave\u id

。您的代码需要正确匹配结构。顺便问一下，$.getJSON调用的目的是什么？您似乎没有使用该位执行任何操作是的，fetch（）没有什么问题但是我得到的结果并存储在res中，我希望它能显示在表中。我试图使用getJson来获取数据并在表中显示它们。我以前使用过这个，但那是一个保存的.json文件，但现在我没有将其保存在文件中。直接调用api。好的，我在控制台中得到了对象，我仍然需要帮助以显示它们tableOkay，那么您需要将

Object.keys（res）.map（key=>res[key]）

存储到一个变量中。例如：将其命名为

objectArray

then

$（'#slave_table'）。append（objectArray.map（Object=>'+'+''+Object.value+'+'+''+Object.status+'+''+Object.volt+'+''）；

{
"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"
}