Google表格仅返回我的REST API的一行

Question

我正在尝试使用Angular在Google Table Charts中显示REST API的数据，但是在执行代码时，它仅返回最后一条记录，我想知道如何显示所有记录？ 。

Table Picture

ngOnInit(){
    this.httpClient.get(this.url).subscribe((res: Data[]) => {
      Object.entries(res.countries).forEach(([y,v] )=> {





      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {



        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Nombre Pais');
        data.addColumn('number', 'Nro de casos');


       data.addRows([
       [y,v['total_cases']],
        ]);
      console.log([v['total_cases']]);
        var table = new google.visualization.Table(document.getElementById('table_div'),);

        table.draw(data, {showRowNumber: true, width: '50%', height: '100%',page: 'enable',
        pageSize: 50}); }});

    }
    )}
      }

JSON结构：

{"countries":{"USA":{"country_name":"USA","total_cases":1735029,"total_recovered":481988,"total_deaths":101285},"Brazil":{"country_name":"Brazil","total_cases":394507,"total_recovered":158593,"total_deaths":24600},"Russia":{"country_name":"Russia","total_cases":370680,"total_recovered":142208,"total_deaths":3968},"Spain":{"country_name":"Spain","total_cases":283339,"total_recovered":196958,"total_deaths":27117},"UK":{"country_name":"UK","total_cases":267240,"total_recovered":null,"total_deaths":37460},"China":{"country_name":"China","total_cases":82993,"total_recovered":78280,"total_deaths":4634}}

Answer 1

您需要在中为每个构建数据，在绘制图表之前。

请参见以下代码段...

ngOnInit() {
  this.httpClient.get(this.url).subscribe((res: Data[]) => {
    // build data
    var rawData = [];
    Object.entries(res.countries).forEach(([y, v]) => {
      rawData.push([y, v.total_cases]);
    });

    // draw chart
    google.charts.load('current', {
      packages: ['table']
    }).then(function () {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Nombre Pais');
      data.addColumn('number', 'Nro de casos');
      data.addRows(rawData);

      var table = new google.visualization.Table(document.getElementById('table_div'),);
      table.draw(data, {showRowNumber: true, width: '50%', height: '100%',page: 'enable', pageSize: 50});
    });
  });
}

---

以下是一个有效的示例...

var res = {"countries":{"USA":{"country_name":"USA","total_cases":1735029,"total_recovered":481988,"total_deaths":101285},"Brazil":{"country_name":"Brazil","total_cases":394507,"total_recovered":158593,"total_deaths":24600},"Russia":{"country_name":"Russia","total_cases":370680,"total_recovered":142208,"total_deaths":3968},"Spain":{"country_name":"Spain","total_cases":283339,"total_recovered":196958,"total_deaths":27117},"UK":{"country_name":"UK","total_cases":267240,"total_recovered":null,"total_deaths":37460},"China":{"country_name":"China","total_cases":82993,"total_recovered":78280,"total_deaths":4634}}};

var rawData = [];
Object.entries(res.countries).forEach(([y, v]) => {
  rawData.push([y, v.total_cases]);
});

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Nombre Pais');
  data.addColumn('number', 'Nro de casos');
  data.addRows(rawData);

  var table = new google.visualization.Table(document.getElementById('table_div'),);
  table.draw(data, {showRowNumber: true, width: '50%', height: '100%',page: 'enable', pageSize: 50});
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>