Wikipedia Viewer Open Search API Help!

Hey there, I am doing the Wikipedia Viewer challenge and I believe I have everything written correctly to call the API and get a JSON response, but for some reason I do not always get a JSON response. I am testing it right now by consoling the JSON response when the result is a success, but it does not always work and it doesn’t have a consistent pattern as to when or why it is working. If someone could test it out and give it a look I would appreciate it, and if there is an error somewhere please let me know! Here is a link to a JSON response to check it out: https://en.wikipedia.org/w/api.php?action=opensearch&search=bible&format=json&callback=?

If I change the dataType to

  dataType: 'application/json',

it seems to start responding. I’m not super familiar with jQuery but I hope that helps a bit?

Hey thanks for commenting. I tried it and it is triggering my error message now!

One of the annoying things about the Wikipedia is it hides everything under an pageid element in the json output. I found a jQuery Plugin (https://github.com/9bitStudios/wikiblurb) which provides an easy way to get the text of a wikipedia article, I’m still working on how to get search results though I might have to use their API directly for that. Not sure yet but good luck with your project :slight_smile:

Hello, “evil form submit”. We meet again. :stuck_out_tongue:

Here’s what I see. You’ve wrapped your input and button inside a form. This is good practice. When you hit search, it tries to submit the form… causing a page refresh and cancelling everything you’re waiting on.

By adding preventDefault() to your submit handler, you’ll stop that and the call to wikipedia will go though.

$("#lookUp").submit(function(e) { // don't forget the 'e' in the function call
    e.preventDefault();
    // the rest of your code
}

This is all I needed to get your form working. Give it a try and let us know if it helps.

Also, remember to encodeURIComponent(searchTerm) so you can search with spaces.

Something else that you can look at, but isn’t completely required: You can switch .ajax to something like .get or even .getJSON and save yourself some typing.

1 Like

Hi Dave thanks for helping! I added the prevent default to the code and its working fine. It seems to already work with spaces in there as well without encodeURIComponent. Do you mind taking another look and seeing if I still need it? I’ll look into the .getJSON method and let you know if I have questions!

In my browser is works perfectly.

I think encodeURIComponent is to protect older browsers that will vomit if you send that through—more of a safe-guard—and it to protect against unsafe characters (what happens if you need a / or an & in your search?).

That’s a valid point, though people should keep their web browsers updated.

Hey everyone I have one last question on my project. I am just about finished, but I noticed that when I search over 3 words at a time I get undefined for all my results. Could anyone take a look and let me know what could be causing this? I have tested this on other similar projects that people have done and it works on theirs. I appreciate the feedback!

1 Like

You’ve made an assumption in your code that there will always be 10 results. When your loop appends content that doesn’t exist, it displays as “Undefined”.

Instead change your loop to use i < data.length and see what happens.

1 Like

Thank you for catching that. I fixed it. Try searching about 4 words in on my project, and then search those same 4 words on this one and you will see that it gets results while mine does not.

1 Like

They’re using a different search url. You could use that too, but take a look at the results.

While they definitely get more results, yours are more relevant. Search for barrel of monkeys should show me the game at the top of the list, but with theirs, it’s fifth.

You could probably spend a day tweaking the search url to get exactly what you need, but I wouldn’t lose sleep over it until someone is willing to pay you for it. :wink:

1 Like

Wait!

Taking a quick look at this new search url, I see an index property on each found page. They’re out of order, but in the case of barrel of monkeys, its index is 1.

You’d have to run a sort on a multidimensional array, but that might get it done.

(now, you got me all curious. :stuck_out_tongue_winking_eye: )

1 Like

Good catch :slight_smile:

I have another question about a different project that I am working on. This is the random quote machine. I already did it but I wanted to update it to use an API. However, I am running into a CORS error when I do my search. I tried to make the request be the same as it is with my wiki viewer api as far as adding the callback=? at the end of my url to get around it. It worked for the wiki viewer, but it is not working here and I don’t know why. I am having a hard time understanding how jsonp works in an ajax request and what I need to do. If anyone wants to take a look at this I would be grateful. https://codepen.io/tsjohns9/pen/YQNeYp?editors=1011

Here is the documentation page for the api: http://labs.bible.org/api_web_service

I don’t think this is the same error as Wikipedia. This reads more like someone has forcefully blocked this api from working on Codepen. Even in China, I’m able to use the API directly, but every attempt to use it in a pen fails.

You should open a new topic so other people can see your issue and chime in.

You might need to wait until you get to some of the backend stuff (with Express and Node). Then, you can make your own pass-through microservice to avoid the block… or just build a full service on Heroku. :wink: