He estado buscando durante horas para crear una variable de javascript que contenga esos datos de un objeto JSON importado. No puedo encontrar nada que se acerque a ayudarme a resolverlo. Cada vez que busco este tema, me lleva a tutoriales sobre cómo iniciar un archivo JSON en js para uso externo. Estoy tratando de usar la variable con el objeto JSON con D3.js. Este es el código básico de mi último intento:
const dataset = document.addEventListener('DOMContentLoaded', function(){ fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json') .then(response => response.json()) .then(data => data.data); }); console.log(dataset); Sé que puedo poner el console.log dentro del método fetch().then() , pero para usarlo con D3.js de la manera que quiero, debe ser una variable global. He intentado inicializar la variable dentro del método fetch() , pero eso no me permite usarla globalmente. También he probado este tipo de código:
var dataset = []; document.addEventListener('DOMContentLoaded', function(){ fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json') .then(response => response.json()) .then(data => dataset = data.data); }); console.log(dataset);Como era de esperar, el conjunto de datos sigue siendo una matriz vacía.
---Actualizar---
Aquí está el proyecto codepen: https://codepen.io/critchey/pen/YzEXPrP?editors=0010
Este debería funcionar:
const dataset = await fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json') .then(response => response.json()) .then(data => data.data);La otra forma es:
let dataset; fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json') .then(response => response.json()) .then(data => dataset = data.data);pero el valor del conjunto de datos no estará disponible justo después de este código, sino una vez que se resuelva Promise. Entonces, nuevamente, debe agregar await before fetch para esperar a Promise.