Как сохранить вывод API в таблицу на html-странице?

Question

Я пытаюсь получить вывод (room_presences.occupied) из моего запроса API и сохранить его как поле в столбце «Занят» для таблицы на странице html.Как сохранить выходные данные запроса API и добавить их в таблицу?

Для некоторого контекста это система определения занятости помещения.Я пытаюсь сохранить статус занятости для комнат в таблицу, которая отображается на html-странице (ниже) в столбце занятости.У меня это отображается на консоли, чтобы показать, что запрос работает.

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest();

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'http://localhost:3000/api/room_presences', true);

request.onload = function () {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response);

  data.forEach(room_presences => {
  // Log each Occupancy
    console.log(room_presences.occupied);
  });
}

// Send request
request.send();

Answer 1

Если я правильно понял вашу проблему, вот решение, суть этого:

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest();

// Open a new connection, using the GET request on the URL endpoint
request.open("GET", "http://localhost:3000/api/room_presences", true);

request.onload = function() {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response);
  // have a dom node that would contain the table
  const tableContainerEl = document.querySelector("#table_id")
  for (let i = 0; i < data.length; i++) {
    // skip the header row with +1
    const rowIndex = i + 1;
    const row = tableContainerEl.rows[rowIndex];
    // we hit an empty row,
    // so there is probably no more rows with content
    // get out of the loop
    if (!row) {
      break;
    }

    const bookedCellIndex = 1;
    const bookedCell = row.cells[1];
    bookedCell.innerHTML = data[i].occupied ? "YES" : "NO";
    const occupancyCellIndex = 4;
    const occupancyCell = row.cells[occupancyCellIndex];
    occupancyCell.innerHTML = data[i].occupied;
  }
};

// Send request
request.send();