get Object inside array javascript

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.

fyasir · Accepted Answer · 2021-03-26 23:49:31Z

1

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

edited Mar 26, 2021 at 23:49

answered Mar 26, 2021 at 23:24

fyasir

2,9902 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2727167 Over a year ago

Very clean and promising. But, how can I use res.features outside getResponse() function? I want to save it to global variable.

fyasir Over a year ago

To use your global variable, you have to make sure your request has completed which is an async call. So your global var is dependent on this call. Can you explain a bit how do you use this variable?

user2727167 Over a year ago

Sure. Variable ohl_json is to be used later in code to generate Leaflet layer and show it on map.

fyasir Over a year ago

If you want to use this feature as a global variable, I would suggest to use a state manager (Redux, Mobx, etc). Because this call is asynchronous and if you want to put it in a global variable then you have to wait till the response completed. So one option to call the getResponse where you want to use this value or another option to use a state manager.

Gabriel · Accepted Answer · 2021-03-26 23:43:46Z

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 =)

edited Mar 26, 2021 at 23:43

answered Mar 26, 2021 at 22:16

Gabriel

194 bronze badges

6 Comments

user2727167 Over a year ago

Unfortunately, this is not working. I get Uncaught TypeError: can't access property 0, ohl_json[0] is undefined

Gabriel Over a year ago

Try this: let ohl_json = []; var req = new XMLHttpRequest(); req.open('GET', 'raw.githubusercontent.com/tekija/LCd/master/testSO.json', true); req.addEventListener('load', function(test){ ohl_json.push(req.responseText) }) req.send(); console.log(ohl_json)

user2727167 Over a year ago

It gets data, as array of text. i.e: "Array [ "{\n \"type\": \"FeatureCollection\",\n \"features\": [\n {\n \"type\": \"Feature\" ". How can I parse this back to json format?

Gabriel Over a year ago

you can use JSON.parse() function - like this: let ohl_json = []; var req = new XMLHttpRequest(); req.open('GET', 'raw.githubusercontent.com/tekija/LCd/master/testSO.json', true); req.addEventListener('load', function () { ohl_json.push(JSON.parse((req.responseText))) }) req.send();

user2727167 Over a year ago

OK It works, but I again get an array with objects: Array [] 0: Object { type: "FeatureCollection", features: (960) […] } 1: 1 length: 2

|

Collectives™ on Stack Overflow

get Object inside array javascript

2 Answers 2

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related