得到数组 javascript 内的 Object

Question

I am struggling to get json object outside XMLHttpRequest .This is what I did:

    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)

I get following output:

Array []
​
0: Object { type: "FeatureCollection", features: (960) […] }
​​
features: Array(960) [ {…}, {…}, {…}, … ]
​​
type: "FeatureCollection"
​​
<prototype>: Object { … }
​
length: 1
​
<prototype>: Array []

I tried to reference it with ohl_json[0] or ohl_json.features but no success. How can I access it? Any help is appreciated.

Answer 1

A better way to do this:

async function getData(){
  const data =  await (await fetch('https://raw.githubusercontent.com/tekija/LCd/master/testSO.json')).json()

  console.log(data.features)
};

getData();

Doing this, you will acess the features object =)

Answer 2

In your code snippet, you have set the 3rd parameter of req.open as true which means it will work asynchronously.

req.open('GET', 'https://raw.githubusercontent.com/tekija/LCd/master/testSO.json', true);

If you wrap your XMLHttpRequest into a promise and resolve with the response then you would be able to get the JSON outside the function.

 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); });