Estoy luchando para obtener el objeto json fuera de XMLHttpRequest. Esto es lo que hice:
var ohl_json=[];
var req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', 'https://raw.githubusercontent.com/tekija/LCd/master/testSO.json', true);
req.onload = function() {
var jsonResponse = req.response;
ohl_json.push(jsonResponse)
};
req.send();
console.log(ohl_json)
Recibo el siguiente resultado:
Array []
0: Object { type: "FeatureCollection", features: (960) […] }
features: Array(960) [ {…}, {…}, {…}, … ]
type: "FeatureCollection"
<prototype>: Object { … }
length: 1
<prototype>: Array []
Intenté hacer referencia a él con ohl_json[0] o ohl_json.features pero no tuve éxito. ¿Cómo puedo acceder a él?
Se agradece cualquier ayuda.
------------------------------------
En su fragmento de código, ha configurado el tercer parámetro de req.open como verdadero, lo que significa que funcionará de forma asincrónica.
req.open('GET', 'https://raw.githubusercontent.com/tekija/LCd/master/testSO.json', true);
Si envuelve su XMLHttpRequest en una promesa y la resuelve con la respuesta, podrá obtener el JSON fuera de la función.
function getResponse() {
return new Promise(function (resolve, reject) {
const req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', 'https://raw.githubusercontent.com/tekija/LCd/master/testSO.json', true); // Third parameter is true which means request will work asyncronously.
req.onload = function() {
resolve(req.response);
};
req.send();
});
}
getResponse()
.then(function(res) {
console.log(res.features);
});
4
Muy limpio y prometedor. Pero, ¿cómo puedo usar res.features fuera de la función getResponse()? Quiero guardarlo en una variable global.
Usuario2727167
26/03/2021 a las 23:39
Para usar su variable global, debe asegurarse de que su solicitud se haya completado, que es una llamada asíncrona. Entonces su var global depende de esta llamada. ¿Puedes explicar un bi?¿Cómo se utiliza esta variable?
- fyasir
26/03/2021 a las 23:48
Claro. La variable ohl_json se utilizará más adelante en el código para generar la capa Folleto y mostrarla en el mapa.
Usuario2727167
27 de marzo de 2021 a las 7:29
Si desea utilizar esta función como variable global, le sugeriría utilizar un administrador de estado (Redux, Mobx, etc.). Porque esta llamada es asíncronaous y si desea ponerlo en una variable global, debe esperar hasta que se complete la respuesta. Entonces, una opción para llamar a getResponse donde desea usar este valor u otra opción para usar un administrador de estado.
- fyasir
27/03/2021 a las 11:27
------------------------------------
Una mejor manera de hacer esto:
async function getData(){
const data = await (await fetch('https://raw.githubusercontent.com/tekija/LCd/master/testSO.json')).json()
console.log(data.features)
};
getData();
Haciendo esto accederás al objeto de características =)
6
Desafortunadamente, esto no funciona. Recibo un TypeError no detectado: no puedo acceder a la propiedad 0, ohl_json[0] no está definido
Usuario2727167
26/03/2021 a las 22:38
Pruebe esto: let ohl_json = []; var req = nuevo XMLHttpRequest(); req.open('GET', 'raw.githubusercontent.com/tekija/LCd/master/testSO.json', true); req.addEventListener('cargar', función(prueba){ ohl_json.push(req.responseText) }) req.send(); console.log(ohl_json)
- Gabriel
26/03/2021 a las 22:49
Obtiene datos, como una matriz de texto. es decir: "Matriz [ "{\n \"tipo\": \"FeatureCollection\",\n \"características\": [\n {\n \"tipo\" : \"Característica\" ". ¿Cómo puedo analizar esto nuevamente al formato json?
Usuario2727167
26/03/2021 a las 23:05
puedes usar la función JSON.parse(), así: let ohl_json = []; var req = nuevo XMLHttpRequest(); req.open('GET', 'raw.githubusercontent.com/tekija/LCd/master/testSO.json', verdadero); req.addEventListener('cargar', función () { ohl_json.push(JSON.parse((req.responseText))) }) req.send();
- Gabriel
26/03/2021 a las 23:11
OK, funciona, pero nuevamente obtengo una matriz con objetos: Array [] 0: Objeto { tipo: "FeatureCollection", características: (960) […] } 1: 1 longitud: 2
Usuario2727167
26/03/2021 a las 23:25
