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.