Could Someone Look at My Wikipedia Viewer

1

I got the main function to work, but the list won’t come through.

Here’s my codepen link: Wikipedia Viewer

My console is saying XMLHttpRequest cannot load [API URL](https://en.wikipedia.org/w/api.php action=opensearch&format=json&search=&namespace=0&limit=15&profile=fuzzy&suggest=1&redirects=resolve&callback=&action=opensearch&format=json&search=&namespace=0&limit=15&profile=fuzzy&suggest=1&redirects=resolve). No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.

Thanks in advance.

2

I had to fiddle around for a while, but it seems the problem is you wrote “datatype” instead of “dataType” in your ajax call.

After that you get different problems, but hopefully you can figure those out with the cors problem out of the way

Good Luck!

1 Like
3

Error details: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

TLDR: This is security feature in modern browsers where you cannot make Ajax requests to third party services without permission defined on the same server. Luckily, we have an alternative known as JSONP: https://www.w3schools.com/js/js_json_jsonp.asp

If you are using jquery ajax method then there should be a option known as ‘cross_origin’ which should be set to true.

4

I was able to make the fix, so now I have an issue with $(data.query.search),
Uncaught TypeError: Cannot read property 'search' of undefined

5

Well, as per your code typing “hi” in the search would give me this https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=hi&namespace=0&limit=15&profile=fuzzy&suggest=1&redirects=resolve&utf8=1&callback=

but your success function references $(data.query.search) and as following the link will show you, there is no key called query, just an array containing the search term and 3 arrays. one for titles of search results, one for descriptions of the results at the corresponding index number, and one for the link to the wikipedia article for the index number.

you basically want for each result

data[1][i] //title 
data[2][i] //description
data[3][i] //link to wiki

I would change out the 2 .each functions for 1 for loop, (1 each might work too, but I’m not as familiar with it)

for(i=0;i<data[1].length;i++)

and then you will have to change for instance “this.title” to data[1][i].

…also you have to put your variables inside the function, you want to set what search is every time someone clicks, not just once on page load. same with url.

Hope thats enough to get you going.

6

I think I have one more issue and that is the data[1].length my console keeps giving me, VM15296 pen.js:37 Uncaught TypeError: Cannot read property 'length' of undefined

7

Oh, sorry I didn’t see your reply sooner.
That’s just due to my last point in the previous reply, you need to move the variables into the function. As it currently is, when the page loads it sets search as undefined (because theres no input) and url is messed up because of that, and the json data because of url.

Once you move them into your getSearch() function they update every time someone clicks search, instead of just one time when the javascript loads.

1 Like
8

It works! Thank you so much! I mentioned you in my footer.

2 Likes