Pushing object into object array - wikipedia viewer SOLVED

1

Hi, I am working on Wikipedia Viewer and currently stucked on this issue. I managed to make my API data request working fine, and I get the response OK. But then I want to pass the objects from that response into object array;

Here is my code

var dataApi = {
  dataObj: [],
  getSearchResult: function() {
    var keyWord = "batman";
    var wikipediaRequest = new XMLHttpRequest();
    
    wikipediaRequest.open('GET', "https://cors-anywhere.herokuapp.com/https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=" + keyWord);
   
    wikipediaRequest.onload = function() {
    var jsonData= JSON.parse(wikipediaRequest.responseText);
        for (var i=0; i < jsonData.query.search.length; i++) {
        dataApi.dataObj.push(jsonData.query.search[i]);
        }
    }
    wikipediaRequest.send();
  }
}

I want objects in jsonData to be added to dataObj; Anyone has any idea how to fix my code to make it work?

Thanks for your time :slight_smile:

3

Instead of your for loop, what about just:

    wikipediaRequest.onload = function() {
      var jsonData= JSON.parse(wikipediaRequest.responseText);
      this.dataObj = jsonData.query.search;
    }

or just

    wikipediaRequest.onload = function() {
      this.dataObj = JSON.parse(wikipediaRequest.responseText).query.search;
    }
2 Likes
4

It did not work the way I wanted. What I was trying to do was adding to dataObj results from API response (the objects on that response), and your suggestion to assign dataApi.datObj to jsonData did the trick. Thank you :slight_smile:

1 Like
5

Thanks for your help, yes, I got rid of the for loop and it worked. However ‘this’ refers to Window object, not dataAPI, as it is in a function inside a function. I had to change ‘this’ to dataApi and I got the result I wanted. Thanks for your help

6

You are correct that this is not what you wanted, but it refers to the wikipediaRequest, not to the Window.

7

Your original code with the loop works - without seeing your complete code I can only guess the issue was the code does not use the filled dataObj in the xhr request handler - since the request handler is async any use of dataApi outside the request handler needs to hang off the execution of the handler otherwise dataApi.dataObj is indeterminate

Also it’s easier to set wikipediaRequest.responseType="json" before sending the xhr - then you can simply use wikipediaRequest.response as an object - there is no need for JSON.parse, e.g.

wikipediaRequest.response.query.search[i]

Using this in event handlers requires care

wikipediaRequest.onload = function() {
// prints XMLHttpRequest because this refers to wikipediaRequest
  console.log(`what is this? ${this.constructor.name}`)
}

arrow functions provide generally desired and expected behavior

wikipediaRequest.onload = () => {
// prints Object because this refers to dataApi
  console.log(`what is this? ${this.constructor.name}`)
}

Details on MDN

8

You are right, thanks for correcting me

9

Thanks for the detailed explanation. And yes, you are right, my code worked in the first place, I just did not check it the proper way and thought it was not working :thinking: I did not have more code, and just checked if this piece work in a console, using debugger. When I run the function, I could see what this code was doing with data received from API response, and as I could not see them being added to dataObj I thought it was not working :tired_face: But now I checked it by just calling the dataObj in console and objects from API response where there. I just lost so much time on it, trying to figure out what was wrong.
But at least I received some good coding tips from all of you guys who responded.
Thanks :rofl: