How to extract nested json value in a html table row using javascript

I am trying to get the object number from an array in this HTML table. And I am also trying to get the key and value of the data object in this JSON array. I have tried with this code and do not know how to proceed in the red marked area of the code. Can anyone help me to find what is missing?

var myArray = []

$.ajax({
  method: 'GET',
  url: 'url',
  success: function(response) {
    myArray = response
    buildTable(myArray)
    console.log(myArray)
  }
})

function buildTable(data) {
  var table = document.getElementById('myTable')

  for (var i = 0; i < data.length; i++) {
    var row = `<tr>
      <td>${data[i].}</td> // Row number
      <td>${data[i].date_time.substring(0, 10)}</td>
      <td>${data[i].date_time.substring(11, 19)}</td>
      <td>${data[i].data.}</td> // Measurement type, the key of data object
      <td>${data[i].data.}</td> // Measurement type, the value of the data object
    </tr>`
    table.innerHTML += row
  }
}
th {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<table class="table table-striped">
  <tr class="bg-info">
    <th>Row Number</th>
    <th>Date</th>
    <th>Time</th>
    <th>Measurement Type</th>
    <th>Value</th>
  </tr>

  <tbody id="myTable">

  </tbody>
</table>

The browser image is here

Answer

This solve your problem:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        color:#fff;
            }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th>Row Number</th>
        <th>Date</th>
        <th>Time</th>
        <th>Measurement Type</th>
        <th>Value</th>
    </tr>

    <tbody id="myTable">
        
    </tbody>
</table>

<script>
    var myArray = []

   $.ajax({
     method:'GET',
     url:'http://webapi19sa-1.course.tamk.cloud/v1/weather',
     success:function(response){
        myArray = response
        buildTable(myArray)
        console.log(myArray)
     }
   })

    function buildTable(data){
        var table = document.getElementById('myTable')

        for (var i = 0; i < data.length; i++){
            var row = `<tr>
                            <td>${data[i].id}</td>
                            <td>${data[i].date_time.substring(0, 10)}</td>
                            <td>${data[i].date_time.substring(11, 19)}</td>
                     <td>${Object.keys(data[i].data)[0]}</td> 
                     <td>${data[i].data[Object.keys(data[i].data)[0]]}</td> </tr>`
            table.innerHTML += row


        }
    }

</script>