Блог

Я извлекаю данные с сервера, я хотел бы перебрать значения и отобразить их в первом столбце таблицы. Буду признателен за любую помощь, которая может направить меня в правильном направлении.

Javascript

 fetch(_____,{
}).then(data => {
    var mstone = data.MilName;

    var table = document.getElementById("milestone-table");
    var row = table.insertRow(table.rows.length);
    // var cell1 = row.insertCell(0);
    //var cell2 = row.insertCell(1);

    //cell1.setAttribute("style", "text-align:center");
    //cell2.setAttribute("style", "text-align:center");
    
    //Iterating through data values and trying to display onto table
    for(var i = 0; i < mstone.length; i  ){
        var cell = row.insertCell(0);
        cell.setAttribute("style", "text-align:center");
        cell.innerHTML = mstone[i]; 
    }

}).catch(function(err){
    console.log("Fetch Problem: "   err);
});
 

Вы можете настроить таблицу в формате HTML без добавления каких-либо строк, просмотреть данные ответа и добавить строку и ячейку для каждого элемента.

 const data = ['foo', 'bar', 'baz'] // Dummy response data
const tbody = document.querySelector('tbody');

data.forEach(item => {
  const tr = tbody.insertRow();
  tr.insertCell().innerText = item
}) 

 <table>
  <thead>
    <tr>
      <th>Column Heading</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table> 

Попробуйте что-нибудь вроде приведенного ниже. Есть вложенные циклы (1 для строк и 1 для столбцов)

 fetch("https://swapi.dev/api/planets/")
  .then((res) => res.json())
  .then((resp) => {
    const results = resp.results;
    var table = document.getElementById("table");

    for (let j = 0; j < 4; j  ) {
      var row = table.insertRow(j);
      for (var i = 0; i < 4; i  ) {
        var cell = row.insertCell(0);
        cell.setAttribute("style", "text-align:center; border: 1px solid blue;");
        cell.innerHTML = Object.values(results[j])[i];
      }
    }
  }); 

 <table id="table" style="border: 1px solid grey"></table>