Struggling with type of data in Wikipedia api challenge

Hello world,

I am working on the wikipedia challenge, I’ve decided to use fetch to collect the data.

So far, I think I’ve succeed to put the object with the response of the API in an array. Obviously, not that much, indeed when I try to use the array, all the data in it are defined as undefined.

Here is a pic to help you understand my problem.

Please, could someone explain me why. And is it possible to define those data.

Thanks you a lot for your time.

Cheers Nico.

That looks fine to start with - the fetch is working as expected. But the console.log’s you have at the bottom of the code will run before the fetch returns the data, which is why you’ll be seeing undefined. It’s not sequential, fetch is asynchronous: it takes time to fetch data from a server, so JS will move on and run the log functions before you get the data back, you have to deal with the data in a this function.

Can you paste the code here rather that using a screen capture (it’s easier to debug if I can copy the code)?

Hi Dan,

Thank you so much for you fast answer, sorry I could not reply before today.

Here is my code :

let url = 'https://cors-anywhere.herokuapp.com/http://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&prop=info&inprop=url&gsrsearch=fetch'

const ola = [];
const finds = fetch(url)
  .then(response => response.json())
  .then(data => Object.values(data.query.pages))
  .then(value => ola.push(...value));


console.log(finds);
console.log(ola);

I think I got what you explained, I’ll try to work on a this function, I’ve seen it many times now but I’m not sure on how to incorporate it to the code.

Thanks for you help so far, waiting for your answer :slight_smile: I’ll let you know if I find a way by myself.

Nico

Hi, thanks for the editing, I’ll know for the next time :),

Nico

The most straight forward way to handle this is in your fetch.

Consider the code here:

let url = 'https://cors-anywhere.herokuapp.com/http://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&prop=info&inprop=url&gsrsearch=fetch'

function display(data){
  console.log(data);
  var results = document.getElementById("results");
  data.map(item => results.appendChild(createPTag(item)));
}

function createPTag(item){
	var p  = document.createElement('p');
  p.textContent = item.title + ",  " + item.fullurl;
 	return p;
}

fetch(url)
  .then(response => response.json())
  .then(data => Object.values(data.query.pages))
  .then(values => display(values));

In the last part of your fetch you will have the data you need. Its contained in the values variable. Here you can call a function that will handle the data. You pass in the values into this display function.

The asynchronous nature of javascript can take a while to grasp so don’t worry if it doesn’t make sense at first. Fetch is promised based which means you can pass in a callback. The callback will run whenever the fetch finishes. In this case display() is the callback being passed in.

Check out the code running here: https://jsfiddle.net/tb4sat92/1/
Notice the slight delay in the results showing. Fetch is bascially promising to call display when its done its fetching.

Have a look into callbacks, promises and asych/await to find out more.

Hi collinstommy,

Thank you so much for your time and your explanations and your code. Everything is clearer now, except that I’ve made a bit of readings and watching about the this function and do not get the way I could deal with it.
Never mind I’ll work on what you told me too.
Thanks again.

Nico

Don’t worry if you don’t understand these concepts, they are confusing at first. If you have any specific questions just post here and somebody may be able to clear it up for you.