Consuming Wiki Api using AngularJS

Question

I have the the AngularJS as following:

(function() {
    'use strict';

    angular
        .module('ui-chat-app')
        .factory('wikiService', function($http) {
    var wikiService = {
        get: function(keyword) {
            return $http.jsonp('https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exlimit=1&explaintext&exintro&titles=' + keyword.name);
        }
    };

    return wikiService;

})

.controller('aiChatBrain', function($scope, wikiService) {
    wikiService.get({name: 'Sarajevo'}).then(function(data) {
        console.log(data);
    });

});

})();

When the script is executed in firefox I get the following error:

And when the script is executed in chrome I get the following error:

Any idea why this is happening ? :/ I'm totally confused...

Can someone help me out with this please?

Thanks heaps!

Answer 1

When using JSONP, the response from the server is fed to a callback function and executed as javascript (see here What is JSONP all about?)

So, when making JSONP requests in angular, you need to specify a callback function:

The name of the callback should be the string JSON_CALLBACK

From the docs

Your JSON string is being executed, however it is not a valid javascript statement by itself, hence the error.

Try using $http.get instead which will work as you are expecting it to.