1

estoy empezando a aprender javascript, y tengo un servidor con GraphQl, cuando realizo una consulta, me retorna un JSON, pero no he sabido como recorrerlo.

Esto es lo que me retorna

{
"data": {
   "getAllRequests": [
      {
         "id": 11
      },
      {
         "id": 0
      }
   ]
 }
}

Ahora bien puedo colocar directamente la ruta si quiero obtener algo, así

resData.data.getAllRequests[0].id

Pero aun no se como puedo conseguir por medio de un for que recorra todos los id, y me los muestre. He intentado lo siguiente:

for(var i in resData.data.getAllRequests){
            for(var j in resData.data.getAllRequests[i]){

            }
        }

Pero no me retorna exactamente el id.

1 respuesta 1

2

Para recorrer el objeto tienes varias opciones, sin embargo lo que realmente deseas es recorrer el Array que viene en el atributo getAllRequests de tu objeto data.

PROBLEMA

Se desea recorrer un Array que contiene elementos (objetos) JavaScript. El Array es el valor de un atributo en un objeto que se recibe desde GraphQL.

SOLUCIÓN

Dado que el objeto que recibes tiene una estructura conocida, podemos recorrer su estructura y extraer la información relevante usando un bucle for, ya que es lo más adecuado según el planteamiento del problema.

En el código que pones de ejemplo en tu pregunta, veo que usas un bucle for...in, sin embargo, de acuerdo a la documentación de dicho bucle, este se usa para recorrer objetos, y en tu caso tu deseas recorrer un Array.

Para lograrlo usaremos el bucle for...of.

const obj = {
  "data": {
    "getAllRequests": [
      {
        "id": 11
      },
      {
        "id": 0
      },
      {
        "id": 3
      }
    ]
  }
}

const arr = obj.data.getAllRequests; // <= éste atributo contiene un array

for(let element of arr) {
  console.log('id: ', element.id); // <= cada elemento del array es un objeto
}

A veces tendemos a confundir la terminología y por lo tanto es común este tipo de errores.

Como GraphQL nos devuelve un objeto, nos vemos tentados usar el bucle for...in para recorrer cualquier elemento de nuestro objeto. Sin embargo, en este caso, el atributo gatAllRequests contiene como valor un Array, cuyos elementos son objetos JavaScript.

Otra forma de recorrer un Array es el método forEach(), la diferencia está en que el método forEach() iterará sobre todos los elementos del array sin que podamos evitarlo (a menos que lancemos una excepción), en cambio el bucle for...of podemos detenerlo con la sentencia break. Otra diferencia está en el hecho que el método forEach() ejecuta una función callback por cada elemento del array.

El código usando el método forEach() podría quedar así:

const obj = {
  "data": {
    "getAllRequests": [
      {
        "id": 11
      },
      {
        "id": 0
      },
      {
        "id": 3
      }
    ]
  }
}

const arr = obj.data.getAllRequests; // <= éste atributo contiene un array

arr.forEach((element) => {
    console.log('id: ', element.id);
});

Espero que esto aclare tu duda.

2
  • Muchas Gracias :D, definitivamente me ayudo, es mucho mas rápido que un for in
    – Loperso
    Commented el 23 abr. 2019 a las 22:17
  • Me alegra que te haya podido ayudar. Commented el 23 abr. 2019 a las 22:36

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.