如何使用 javascript 在 html 表行中提取嵌套的 json 值

Question

我正在嘗試從此 HTML 表中的數組中獲取 object 編號。 而且我還試圖在這個 JSON 數組中獲取數據 object 的鍵和值。 我已嘗試使用此代碼，但不知道如何在代碼的紅色標記區域進行操作。 任何人都可以幫我找到缺少的東西嗎？

 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>

瀏覽器圖片在這里

Answer 1

您需要在建表之前提取密鑰：

<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

這解決了你的問題：

 <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 沒有以任何方式利用 jQuery 的力量。 所以，我冒昧地在這里完全刪除了 jQuery 。 由於.innerHTML+=是一個“昂貴”的操作（它需要每次都重建 DOM），我用更快的innerHTML=分配“循環外”替換它：

 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>

和

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

我得到了 object ( .d.data ) 的第一個 ( [0] ) 鍵和值。 此表達式不會破壞 id d.data應該為空甚至不存在。