Trying to understanding result of .getJSON from wikipedia

Question

So I am doing an API call on Wikipedia, specifically in a link of this structure:

https://en.wikipedia.org/w/api.php?action=opensearch&search=test&limit=10&namespace=0&format=json

Where "test" is the search query - so far so good.

The unfortunately however I do not seem to be able to access any part of the returned content.

This is what I am trying, I have also tried various other things like, data[0], data[1][1], data[1][1][1] etc. but with no luck.

$.getJSON(apiCall, function(data) {
    console.log(data);
});

Why am I not able to console.log out any content from the api call.

You can see my code in practice here: http://codepen.io/scabbyjoe/pen/ZOwRAV

Answer 1

You can't console.log within your success handler because the AJAX GET request fails/is-cancelled, and so jQuery doesn't consider it a success. I think there are two issues at play here causing the failure.

The first actually is a combination of your HTML and JavaScript. Because the button is of type "submit", and because that button is in a form, every time it is clicked, the form it is in will submit.

If you notice, every time you do a search, the page reloads. This is because the form is submitting, but with no designated action property, is just reloads the page the form is found on.

To fix this, stop the click event from bubbling. The function that handles the click event can take a parameter, which is the click event, and you can use that to stop the form from submitting:

$("#searchButton").on("click", function(e) {
    //Stop the event (e, the first parameter, is the click event) from bubbling
    e.preventDefault();
    ...

Before the form-submission issue was fixed, you may have noticed that the AJAX GET request to Wikipedia was being marked cancelled. This is because the page was reloading and the browser was cancelling any incomplete AJAX requests as a part of that process. As a result, the success handler was never being called.

Once the form submission is fixed, you will see that the AJAX GET request returns an error:

XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=opensearch&search=test&limit=10&namespace=0&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.

You cannot make a cross-origin AJAX GET request from your domain to another domain. This is a security feature of your browser.

There's a way around this, however. If the server you are calling supports JSONP, you can use that. Thankfully, Wikipedia's API does support JSONP.

According to the $.getJSON documentation from jQuery:

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

So, simple append &callback=? - exactly that, question mark and all - to the end of the URL you are making your AJAX GET request to, and you should see that request completes successfully.

You should now see that you success handler runs successfully.

You can add a console.log now and see the data returned from the GET request.

console.log(data[1]); will give you the list of article titles the request returned (data[0] should be the search query itself).

Hope that helps!