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

user_4999351 0
Viewed 163

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

html json javascript
3 Answers

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

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>

user_148721210

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.

user_26100610
Related