如何从在线 JSON API 中提取嵌套数据对象？ [关闭]答案

【问题标题】：How to extract nested data objects from an online JSON API? [closed]如何从在线 JSON API 中提取嵌套数据对象？ [关闭]
【发布时间】：2020-07-23 09:55:50
【问题描述】：

这里是 api 的链接 - https://api.rootnet.in/covid19-in/unofficial/covid19india.org/statewise

我尝试使用这个 Jquery 代码。我想为我的项目检索每个州的数据，但我无法从下面给出的代码中访问它们。

$.getJSON('https://api.rootnet.in/covid19-in/unofficial/covid19india.org/statewise', function(data) 
{
    var total_cases = data.total.cases
    var deaths = data.total.deaths
    var recovered = data.total.recovered
    var new_cases = data.total.active
    $(".total_cases").html(total_cases);
    $(".deaths").html(deaths);
    $(".recovered").html(recovered);
    $(".new_cases").html(new_cases);
});

我的问题是关于

【问题讨论】：

您应该使用data.data，因为服务器会使用包含data 属性的对象进行响应。
请首先使用 console.log 或 debugger 关键字来识别 data。

标签： javascript jquery html json api

【解决方案1】：

你应该使用data.data

$.getJSON('https://api.rootnet.in/covid19-in/unofficial/covid19india.org/statewise', function(data) 
{

    var total_cases = data.data.total.active;
    var deaths =  data.data.total.deaths;
    var recovered =  data.data.total.recovered;
    var new_cases = data.data.total.active;
    $(".total_cases").html(total_cases);
    $(".deaths").html(deaths);
    $(".recovered").html(recovered);
    $(".new_cases").html(new_cases);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
total cases <span class="total_cases"></span>
deaths <span class="deaths"></span>
recovered <span class="recovered"></span>
new cases <span class="new_cases"></span>

【讨论】：

【解决方案2】：

Api的答案中数据引用不正确，请查看文档

$.getJSON('https://api.rootnet.in/covid19-in/unofficial/covid19india.org/statewise', function(responseApi) 
{
      try{
      var total_cases = responseApi.data.total.cases || 0
      var deaths = responseApi.data.total.deaths || 0
      var recovered = responseApi.data.total.recovered || 0
      var new_cases = responseApi.data.total.active || 0 
      $(".total_cases").html(total_cases);
      $(".deaths").html(deaths);
      $(".recovered").html(recovered);
      $(".new_cases").html(new_cases);
    }
    catch(error){
      console.error("Error processing data => " + error.message )
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><a>Total Cases: <a><a class= "total_cases"><a/><div>
<div><a>Deaths : <a><a class= "deaths"><a/><div>
<div><a>Recovered : <a><a class= "recovered"><a/><div>
<div><a>New Cases : <a><a class= "new_cases"><a/><div>

【讨论】：

【解决方案3】：

前面的答案已经说明，您访问了错误的属性。如果您安装了 Firefox，您可以轻松检查响应的数据结构

接下来的事情是，您的示例只是获取总数，但您想获取或显示每个单独状态的数据，因此您必须遍历 statewise 属性。

这是一个例子：

$.getJSON('https://api.rootnet.in/covid19-in/unofficial/covid19india.org/statewise', function(result) 
{
    addRow($("#resultTable tfoot"), result.data.total);
    result.data.statewise.forEach(el=>addRow($("#resultTable tbody"),el));
    
});

function addRow(parent, el)
{
  var tr = $("<tr/>");
  
  tr.append($("<td>"+(el.state == undefined?"Overall":el.state)+"</td>"));
  tr.append($("<td>"+el.confirmed+"</td>"));
  tr.append($("<td>"+el.recovered+"</td>"));
  tr.append($("<td>"+el.deaths+"</td>"));
  tr.append($("<td>"+el.active+"</td>"));
  parent.append(tr);
}

th{ text-align:left; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="resultTable"  style="width:100%">
  <thead>
    <tr>
      <th>State</th>
      <th>Confirmed</th>
      <th>Recovered</th>
      <th>Deaths</th>
      <th>Active</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
  <tfoot>
  
  </tfoot>
 </table>

【讨论】：