Получить данные из ответа API и показать в таблице

Question

Я пытаюсь создать таблицу, которая отображает обновления с интервалами, используя 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();

Я правильно передаю данные в функцию.Ответ ниже

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

У меня мало опыта в JavaScript, поэтому, пожалуйста, не возражайте против простого вопроса

Answer 1

Если ваши данные в res, что я видел ниже, то $.each(res.slave_id,... недопустим, потому что res не имеет свойства slave_id. Ваши ключи являются числами, поэтому вы можете повторять их с помощью Object.keys(res).map(key => res[key]).forEach(obj => console.log(obj)).

После карты вы получите массив объектов, значениями которого могут быть строки таблицы.