es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo iterar un objeto JSON después de obtenerlo de manera asíncrona en jQuery?

28 May, 2023 Programación

Tengo un problema al iterar un objeto json en jQuery después de obtenerlo de manera asincrónica.
Con la función async ‘listFiles’ logré obtener la lista de archivos deseada del directorio (dir), por lo menos console.log muestra el json con el contenido.
Pero cuando intento llamar a $.each en el objeto json de lista de archivos fetch, $.each simplemente no funciona.
El console.log dentro de la función $.each debería mostrar algo.

async function listFiles(dir){
var json_data = await fetch(‘action.php’, {
method: ‘POST’,
mode: ‘same-origin’,
credentials: ‘same-origin’,
headers: {
“Content-Type”: “application/json”
},
body: JSON.stringify({dir:dir})
})
.then(response => response.json())
.then(data => {
console.log(‘Success:’, data);
return data
})
.catch((error) => {
console.error(‘Error:’, error);
});

return json_data;
}

var json = listFiles(‘images’);

$(() => {
$.each(json, function(index,val){ //esta función no funciona, no sé por qué 🙁
console.log(“index: “+index+”; value: “+val);
})

console.log(json); //esto muestra el contenido del objeto json fetcheado
});

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Problema con iterar objeto JSON en jQuery después de obtenerlo de manera asíncrona

    Descripción del problema

    El usuario tiene un objeto JSON que debe ser obtenido de manera asíncrona utilizando la función listFiles. Después de la obtención exitosa, el objeto JSON es retornado. Sin embargo, cuando el usuario intenta iterar sobre el objeto JSON utilizando $.each, la función no se ejecuta como se espera.

    Solución

    El problema al iterar sobre el objeto JSON utilizando $.each es que el objeto JSON retornado es un objeto Promise. Por lo tanto, la función $.each no puede iterar sobre el objeto Promise.

    Para solucionar este problema, el usuario necesita esperar la llamada a la función listFiles y luego iterar sobre el objeto JSON obtenido después de que ha sido resuelta. Esto se puede hacer actualizando el código de la siguiente manera:

    (async function() {
  var json = await listFiles('images');

  // Iterar sobre el objeto JSON resuelto utilizando $.each
  $.each(json, function(index,val){ 
    console.log("índice: "+index+"; valor: "+val); 
  });

  console.log(json);
})();

    En el código actualizado, se espera la función listFiles, y se itera sobre el objeto JSON resuelto utilizando $.each. Al envolver el bloque de código en una función asíncrona e invocarla inmediatamente, el usuario puede asegurarse de que el código se ejecuta en el orden correcto.

    Conclusión

    Cuando se trata de operaciones asíncronas, es esencial manejar adecuadamente los objetos Promise. En este caso, el usuario necesitaba resolver el objeto Promise retornado por la función listFiles antes de iterar sobre el objeto JSON. Al esperar el objeto Promise y utilizar una función asíncrona, el usuario pudo solucionar el problema e iterar sobre el objeto JSON con éxito.

Comments are closed.