getJSON problem with wiki viewer

1

Hi,
I have no idea why my code is not working, in example below I have created two json requests which are almost exactly the same but one is working and the other one is not. http API call from not working one is working in browser.

Thank you for help.

2

If you look in the console you will see that Wikipedia doesn’t allow cross origin requests. You will have to use JSONP. You can do that by adding &callback=? to the end of your url: http://en.wikipedia.org/w/api.php?action=query&titles=kopernik&prop=revisions&rvprop=content&format=json&callback=?

1 Like
3

Ok,
Thank you Sir :].

1 Like
4

Actually, Wikipedia doesn’t block anything, it sends a response to the browser.

The result isn’t shown because browsers block cross-origin responses that lack proper Access-Control-Allow-Origin header for security reasons.

5

Yes, you are correct. But Wikipedia clearly chose not to add such a header. And this way they effectively block it.

6

First you didn’t close your $.getJSON brackets. So there is a syntax error.

If you add }); at the end you get rid of your syntax errors.

2nd thing is you’re using Angular. For Angular to work correctly, you must define your angular module. Something you’re not doing here.

If you make following changes, your pen will start working.

  1. On your body tag, use ng-app="wiki"

on your div tag, use ng-controller="WikiController"

In your JS section:

  1. Define Angular module
var app = angular.module('wiki', []); // wiki because that what we have in ng-app="wiki"
  1. Create controller called WikiController on your app
app.controller('WikiController',['$scope','$http', function($scope, $http){
  //your code here
}]);

I’ve forked and updated your pen here. Where I have updated the API to fetch the list of pages based on query. To test with different input, modify value of query in the code and you should be able to see wiki listing of that query

EDIT:

Here is a pen where you can directly type your queries in the text box and it will search it for you

EDIT 2 :slight_smile:
Beauty of Angular.

Entire functional wiki viewer with merely 11 lines of JS code and 11 lines of HTML :wink:

1 Like
7

Thank you, I have seen some working angular examples but I have to get there by myself :).

Best Rergards,
Konrad

8

I think enough people runs into the same problem that warrants an extra bullet point on the project page about JSONP.

It’s not particularly relevant to programming aspect of the project, and it’s a rather minor thing that once reminded most people can quickly find a solution to their problem.