How to insert a JSON array containing object in a existing table?

Question

I created a basic table with bootstrap in my html file. I would like to fill that table when clicking on a button with the data from my external JSON file. The XMLHttpRequest and JSON.parse worked fine. I got stuck inserting the parsed data into the table with my append_json in the script below.

Thanks in advance:)

This is my table:

<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>  

This my javascript so far:

<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>

This is the json file:

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

to parse json into array use

var myArr = JSON.parse(data);

and then access it as a regular array

myObj = myArr[1]

and then you can use insertRow and insertCell to add the data

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

ofc you would want to loop to parse the data and replace [1] with [i], you should know how to do that by yourself.

EDIT:

Something like this

 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;
  }
}

good luck