0

Estoy intentando leer con fetch un archivo json llamado "data-1.json", el archivo es leido correctamente, pero al querer asignar los datos del JSON a una variable u objeto en Main, no es posible, sin embargo en la funcion lo muestra claramente en el log.. El codigo de javascript es el siguiente:


var json;
leer_datos();
console.log("From main: ");
console.log(json);


 function leer_datos(data){
  fetch('data-1.json')
  .then(respuesta => respuesta.json()) //formato
  .then(datos => {
    var r = JSON.stringify(datos);
      json = JSON.parse(r);
      console.log("From function: ");
      console.log(json);

    })
  }

La salida en consola es esta:

Console Log

Entonces, que estoy haciendo mal? Como puedo guardar mis datos json en una variable en Main? Gracias

EDIT: Revisando la información lo he intentado de otra forma pero aun no logro el resultado que quiero, me podrian orientar un poco? Esto es lo que hice:

let arrayDatos = new Array();
//leer_datos();
guardar();
console.log(arrayDatos);

async function guardar() {
  arrayDatos = await fetch('data-1.json').then(res => res.json())
  arrayDatos[1] ="asd";
  console.log(arrayDatos);
}

La salida en consola que obtengo es: introducir la descripción de la imagen aquí

Entonces como pueden ver aunque desde la función trabaja el array, no puedo guardarlo fuera de la función porque este queda vacío, se supone que para eso estoy usando el await pero sigue sucediendo lo mismo, por favor ayúdenme ya que llevo mucho tiempo en eso...

  • 1
    Hola y bienvenido. Estás en el sitio en español. Por favor traduce tu pregunta o llévala al sitio en inglés https://stackoverflow.com/ – DjCrazy Feb 21 '20 at 12:07
  • Ya lo hice, perdon.. – David Eduardo Feb 21 '20 at 12:12
  • Estas haciendo una llamada asincrona por tanto su `console.log("From main: ");` se ejecuta antes de que termine la ejecución de `leer_datos` – Aníbal Jorquera Feb 21 '20 at 12:19
  • Bueno, entonces como lo podría solucionar, no puedo usar AJAX ni JQuery... La idea es con Vanilla Javascript, sin librerías, Muchas gracias – David Eduardo Feb 21 '20 at 12:27
  • Puede usar async await o directamente una promise para resolver lo que necesitas, ve la pregunta duplicada para entender como funciona – Aníbal Jorquera Feb 21 '20 at 12:46
  • @David `fetch` hace una llamada AJAX y devuelve una promesa. La pregunta enlazada al cerrar la pregunta te permitirá resolver el problema, una vez que entiendas qué es [AJAX](https://developer.mozilla.org/es/docs/Web/Guide/AJAX) – Pablo Lozano Feb 21 '20 at 12:55
  • @DavidEduardo no necesitas implementarle el ajax para que te funcione, pero el link que te mostraron te servirá, ya que muestra claramente el uso del async y el await, de esa misma forma puedes hacerlo con lo que necesitas. – jGomez Feb 21 '20 at 12:58

0 Answers0