How to load a JSON data Object from other domain (no callback function) with AngularJS

Question

Is it possible to load JSON data without callback function in AngularJS? If I manually download the json file and change the url to 'phones/phones.json'. In jQuery it is possible http://www.sitepoint.com/jsonp-examples/

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
    function ($scope, $http) {
    $http.get('https://raw.githubusercontent.com/angular/angular-phonecat/master/app/phones/phones.json').success(function(data) {
        $scope.phones = data.splice(0, 5);
    });

    $scope.orderProp = 'age';

}]);

SOLVED: Thanks! I changed "raw.githubusercontent.com/angular/angular-phonecat/master/app/phones/phones.json" to "rawgit.com/angular/angular-phonecat/master/app/phones/phones.json"

See https://rawgit.com/faq

It was server side problem as Words Like Jared said.

did you check `$http.jsonp` https://docs.angularjs.org/api/ng/service/$http#jsonp. ALso check this http://stackoverflow.com/questions/12066002/parsing-jsonp-http-jsonp-response-in-angular-js — suman j, Aug 17 '14 at 03:47
@Jack I tried $http.jsonp. I want to use json data from other website. I edited an another example using $http.jsonp. — Mika, Aug 18 '14 at 00:17

score 3 · Accepted Answer · answered Aug 18 '14 at 00:47

The problem is not with your client but with your server.

http://plnkr.co/edit/a7K79KTae3CPPZx7XMfH?p=preview

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
    function ($scope, $http) {
    $http.get('https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS').success(function(data) {
        $scope.phones = data;
    });

    $scope.orderProp = 'age';

}]);

That's virtually the same code pointed to a different URL and it works.

I think you need the HTTP request's response to contain the "Access-Control-Allow-Origin" header with a value of say "*" to access the content from another site. How to do that will vary depending on your server technology.

How to load a JSON data Object from other domain (no callback function) with AngularJS

1 Answers1