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

Question

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 1

You need to extract key before building table:

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

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

    for (let i = 0; i < data.length; i++) {
      const measurements = Object.keys(data[i].data);
      const value = measurements.length ? data[i].data[measurements[0]] : '';
      const name = measurements.length ? measurements[0] : '';

      const row = `
        <tr>
          <td>${i}</td>
          <td>${data[i].date_time.substring(0, 10)}</td>
          <td>${data[i].date_time.substring(11, 19)}</td>
          <td>${name}</td> 
          <td>${value}</td>
        </tr>`
      table.innerHTML += row
    }
  }
</script>

Answer 2

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>

Answer 3

OP did not make use of the power of jQuery in any way. So, I took the liberty of removing jQuery here altogether. As .innerHTML+= is an "expensive" operation (it requires the DOM to be rebuilt every time) I replaced it by a faster innerHTML= assignment "outside the loop":

 fetch('http://webapi19sa-1.course.tamk.cloud/v1/weather').then(r=>r.json()).then(data=>document.getElementById('myTable').innerHTML=data.map(d=>`<tr> <td>${d.id}</td> <td>${d.date_time.substring(0,10)}</td> <td>${d.date_time.substring(11, 19)}</td> <td>${Object.entries(d.data||{"":""})[0].join('</td><td>')}</td></tr>` ).join('') );

 th{color:#fff;}

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

With

Object.entries(d.data||{"":""})[0].join('</td><td>')

I get the first ( [0] ) key and value of an object ( .d.data ). This expression will not break id d.data should be empty or even be non-existent.