-1

The following simple code isn't working for Wikipedia API. I'm not sure why.

html:

<button id="main" onclick=doThis()>Main</button>
<div id="result">h<div>

Script:

function doThis() {
var wikiUrl = "https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json";
$.getJSON(wikiUrl, function(data) {
  alert(data);
}, 
  $('#result').html("no")
)}

Output: the $('#result').html("no") line gets executed which I believe means that the getJSON didn't return anything.

What's wrong & how do I fix this?

Dr Confuse
  • 605
  • 1
  • 7
  • 24
  • 2
    Your `$('#result').html("no")` will just execute that code fragment right away, it is not a callback. – Matteo Tassinari Jan 24 '17 at 08:31
  • I added that in to see if anything at all was working. Without that the app feels like a brick. But the thing is- why isn't the JSON getting fetched? – Dr Confuse Jan 24 '17 at 08:33
  • Are you sure it isn't? Have you checked the web console to see what happens to the ajax call? – Matteo Tassinari Jan 24 '17 at 08:34
  • `XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.` – Dr Confuse Jan 24 '17 at 08:36

2 Answers2

3

If you open the browser's console, you'll see this error:

XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

This indicates that you need to instruct $.getJSON() to use jsonp.

To do so, simply add

&callback=?

to your url.

But, as @Rory commented, note:

Note that JSON and JSONP aren't directly interchangeable. This only works here as Wikipedia supports JSONP, whereas many API providers do not.

So changing your code to 

function doThis() {

    var wikiUrl = "https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&callback=?";

    $.getJSON(wikiUrl, function(data) {
        alert(data);
    }); 
)}

will work.

Note that $('#result').html("no") is not a callback, so using it as one doesn't have any positive effect.

baao
  • 71,625
  • 17
  • 143
  • 203
  • Good answer, although note that JSON and JSONP aren't directly interchangeable. This only works here as Wikipedia supports JSONP, whereas many API providers do not. – Rory McCrossan Jan 24 '17 at 08:38
  • well its working now. But I didn't really get the issue. Does wikipedia only provide jsonp or it does json as well? – Dr Confuse Jan 24 '17 at 08:39
  • Thanks @RoryMcCrossan I added that to the answer! – baao Jan 24 '17 at 08:39
  • 2
    You need to use jsonp for front-end cross domain requests without cors headers, as it bypasses restrictions of browsers' same-origin policy . @DrConfuse . Read up on https://en.wikipedia.org/wiki/JSONP – baao Jan 24 '17 at 08:41
1

You have some CORS issue on the call, besides your error callback is wrong.

Try with

$.getJSON('https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&callback=?', function(data) {
   alert(data);
}, function() {
  $('#result').html("no");
});
Dario
  • 6,152
  • 9
  • 39
  • 50