Как вставить массив JSON, содержащий объект в существующую таблицу?

Question

Я создал базовую c таблицу с bootstrap в моем html файле. Я хотел бы заполнить эту таблицу при нажатии на кнопку с данными из моего внешнего JSON файла. XMLHttpRequest и JSON .parse работали нормально. Я застрял, вставив проанализированные данные в таблицу с моим append_ json в приведенном ниже скрипте.

Заранее спасибо:)

Это моя таблица:

<table class="table table-bordered table-hover" id="table">
    <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Quantity</th>
            <th scope="col">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>  

Это мой javascript пока:

<script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

    btn1.addEventListener("click", function (){
        var request = new XMLHttpRequest();

        request.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var json = request.response;
                var data = JSON.parse(json);

                append_json(data);
            }
       };

       request.open("GET", "products.json", true);
       request.send();
   })

   function append_json(data) {}
</script>

Это файл json:

  {
     "products": [
    {
        "id": "1",
        "name": "Apples",
        "hasQuantity": "100",
        "price": "3.10"
    },
    {
        "id": "2",
        "name": "Pears",
        "hasQuantity": "50",
        "price": "2.50"
    },
    {
        "id": "3",
        "name": "Bananas",
        "hasQuantity": "100",
        "price": "2.01"
    },
    {
        "id": "4",
        "name": "Tangerines",
        "hasQuantity": "150",
        "price": "3.41"
    },
    {
        "id": "5",
        "name": "Plums",
        "hasQuantity": "50",
        "price": "4.11"
    },
    {
        "id": "6",
        "name": "Straberries",
        "hasQuantity": "50",
        "price": "3.07"
    }
    ,
    {
        "id": "7",
        "name": "Watermelon",
        "hasQuantity": "20",
        "price": "2.19"
    }

  ]
 }

Answer 1

для разбора json в массив используйте

var myArr = JSON.parse(data);

и затем обращайтесь к нему как к обычному массиву

myObj = myArr[1]

, а затем вы можете использовать insertRow и insertCell для добавления данных

  var table = document.getElementById("table");
  var row = table.insertRow(0);
  var cell = row.insertCell(0);
  cell.innerHTML = "Cell data here";

из c вы хотите, чтобы l oop проанализировал данные и заменил [1] на [i], вы должны знать, как это сделать самостоятельно.

РЕДАКТИРОВАТЬ:

Как-то так

 var table = document.getElementById("myTable");

for( var i = 0; i < myArr.length ; i++) {
  var myObj = myArr[i]
  var row = table.insertRow(i);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = myObj.name;
  cell2.innerHTML = myObj.quantity;
  cell3.innerHTML = myObj.price;
  }
}

удачи