1

Hola estoy tratando de mostrar los datos de una API REST en un Table Charts de Google con Angular pero al momento de ejecutar el codigo solo me devuelve el ultimo registro quisiera saber como puedo hacer para que me muestre todos los registros. Gracias de antemano

Solo me devuelve el ultimo registro que es de China

 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}); }});

    }
    )}
      }

la estructura de mi JSON es la siguiente:

{"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}}

1 respuesta 1

0

Estas creando cada vez el DataTable en cada iteracion de entries, asi que se sobrescribe y deja solo el ultimo.

Deberia ser asi:

ngOnInit() {
  this.httpClient.get(this.url).subscribe((res: Data[]) => {

    let drawTable = () => {
      var data = new google.visualization.DataTable();
      var table = new google.visualization.Table(document.getElementById('table_div'), );

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



      Object.entries(res.countries).forEach(([y, v]) => {
        data.addRows([
          [y, v['total_cases']],
        ]);
        console.log([v['total_cases']]);

      });

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

    }




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

  })
}
}

1
  • 1
    Gracias!!! funciono
    – douglas
    el 27 may. 2020 a las 22:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.