0

Estoy usando la API de Age of Empire 2

El caso es que quiero mostrar por un gráfico el atributo "name" y el "build_time" , pero a la hora de pillarlo me salta este error: introducir la descripción de la imagen aquí

Mi código es este:

 var datoAux5 = [];
 var datoAux6 = [];
 var api3 = "/ui/v1/takingstats/proxy3";
    $http.get(api3).then(function(response) {
        var i;
        for (i = 0; i < response.data.length; i++) {
            datoAux5.push(response.data[i].units.name);
            console.log(datoAux5);
            datoAux6.push(response.data[i].units.build_time);
            console.log(datoAux6);

        }

        var graphdef = {
            categories: ['uvCharts'],
            dataset: {

                'uvCharts': [
                    { name: datoAux5[0], value: datoAux6[0] },
                    { name: datoAux5[1], value: datoAux6[1] },
                    { name: datoAux5[2], value: datoAux6[2] },
                    { name: datoAux5[3], value: datoAux6[3] },
                    { name: datoAux5[4], value: datoAux6[4] }

                ],

            }


        };

        var chart = uv.chart('Donut', graphdef, {
            meta: {
                caption: 'Total population in 2010 in some countries',
                hlabel: 'Years',
                vlabel: 'Number of users',
                vsublabel: 'in thousands'
            }
        });

});

Por lo que creo el error es porque no pilla bien los objetos , alguna sugerencia?

4
  • El error es porque algo que no es un número se está intentando usar/parsear como un número. ¿Qué valores tienen datoAux5 y datoAux6?
    – Alvaro Montoro
    Commented el 27 may. 2019 a las 14:26
  • datoAux5 es el "name" que es String , y el datoAux6 "build_time" que es int. En el enlace que he puesto pone el tipo de las propiedades
    – RoyalUp
    Commented el 27 may. 2019 a las 14:29
  • Es un array dentro de un array , el json de la api de AoE2 , no sé si por ahí andará el problema
    – RoyalUp
    Commented el 27 may. 2019 a las 14:34
  • ¿Podrías crear un ejemplo mínimo verificable? (Sin añadir la clave de API)
    – Alvaro Montoro
    Commented el 27 may. 2019 a las 14:40

2 respuestas 2

1

En primer lugar, tu código se podría optimizar ya que recorres una colección para almacenar unas variables que luego solo utilizas para crear un objeto a mano. Podrías optimizarlo simplemente rellenando el array uvCharts directamente en el for.

En segundo lugar deberías añadir una condición para comprobar que efectivamente tus datos numéricos son como se espera, números:

    let uvCharts = [];

    response.data.units.map(function(elem){
        let name = elem.name;
        let value = elem.build_time;
        if( name && value && !isNaN(value))
            uvCharts.push({"name": name, "value": value});   
    })

    var graphdef = {
        categories: ['uvCharts'],
        dataset: {
            'uvCharts': uvCharts,
        }
    };
5
  • Así ya no me muestra el error pero simplemente no se muestra nada , no pilla el gráfico
    – RoyalUp
    Commented el 27 may. 2019 a las 14:45
  • te lo he actualizado con un mapeo del array ya que el error podría ser que intentaras acceder a response.data[i] cuando creo que response.data de 1, 2 ... no existe y solo hay response.data. Con el map te ahorras conocer el numero de interaciones
    – David
    Commented el 27 may. 2019 a las 14:47
  • Muchas gracias por la solución , funciona bien. Pero me gustaría entenderlo mejor , me podría dar otro tipo de explicación? Me parece bastante interesante la solución
    – RoyalUp
    Commented el 27 may. 2019 a las 14:52
  • 1
    El método map de javascript funciona como los foreach de otros lenguajes y es una forma mas sencilla de recorrer colecciones de datos. Ese JSON que has puesto en el enlace es response.data y tiene un campo units que es una colección de 'n' elementos que se repiten. Con el map puedes utilizar el parametro de la funcion que le pasas al método, lo que yo he llamado elem para obtener los datos de cada interacción. elem es el primer elemento, después el segundo, luego el tercero etcetera. Simplemente recojo los valores que necesito y compruebo que el build_time es realmente un numero
    – David
    Commented el 27 may. 2019 a las 14:57
  • Puedes encontrar más información del array.map aquí: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – David
    Commented el 27 may. 2019 a las 14:58
1

Las unidades están en response.data.units y debes acceder a cada unidad tal que response.data.units[i].name

1
  • Aún así no muestra el gráfico , con la respuesta de abajo se quitan los errores incluyendo lo de corregir el units[i] tampoco lo muestra
    – RoyalUp
    Commented el 27 may. 2019 a las 14:48

Tu Respuesta

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

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