JSON data not showing up when I change http.jsonp() URL

Question

I'm trying to read data from an external JSON file using AngularJS.

Here is my HTML

<div class="panel panel-default" ng-controller="MyAppController">
    <div class="panel-heading">
        <div class="input-group">
            <input ng-model="query" type="text" placeholder="What file are you looking for?" class="form-control"><span ng-click="clearFilter()" ng-disabled="query.length == 0" class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
        </div>
    </div>
    <div class="panel list-group">
        <span data-ng-repeat="cat in cats | filter: query" class="list-group-item animate-repeat">{{cat.title}}
    </span>
        <div class="clearfix"></div>
    </div>
</div>

It works fine when I use this in my JS file and data shows up in a list.

function MyAppController($scope, $http) {     
    var url = 'http://jobs.github.com/positions.json?callback=JSON_CALLBACK';
    $http.jsonp(url).success(function(data) {
        $scope.cats = data;
    });
}

But when I change the URL to my personal site nothing shows up even though I literally just copied and pasted everything in the github JSON file to a local JSON file. (just to test it out)

function MyAppController($scope, $http) {     
    var url = 'http://ciagent.com/Website-files/positions.json?callback=JSON_CALLBACK';
    $http.jsonp(url).success(function(data) {
        $scope.cats = data;
    });
}

http://ciagent.com/Website-files/positions.json?callback=JSON_CALLBACK & http://jobs.github.com/positions.json?callback=JSON_CALLBACK have the same exact content but only the github one works with my angular app for some reason.

Any reasons as to why it's doing this?

Something weird's going on when I try to compare the responses using Fiddler. The ciagent.com response shows a Body of 0 bytes even though I can see the data. Not sure if there's something to that, but it might be related since that's the source that's not working for you. Have you tried watching the traffic with Fiddler..? — Adam Prescott
– Adam Prescott, Commented Jul 13, 2015 at 17:59
Here is a comparison, showing they do contain different content diffchecker.com/ma26pwlr — depperm
– depperm, Commented Jul 13, 2015 at 18:02

charlietfl · Accepted Answer · 2015-07-13 18:15:55Z

3

Assuming you are using a static resource file you need to realize that the string 'JSON_CALLBACK' is a placeholder and gets modified within each $http.jsonp() request to something else.

You should be able to see this in the actual request URL in network tab of browser dev tools.

You can also open the github version in browser and change the value to see that it is not static on their server and will adjust to whatever value is sent.

If you want to use jsonp server side it needs to return dynamic value of the callback GET parameter value.

edited Jul 13, 2015 at 18:15

answered Jul 13, 2015 at 18:01

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryan Neuffer · Accepted Answer · 2015-07-13 18:34:49Z

1

+1 to what @charlietfl said. Also, be sure to set Content-Type:application/javascript;charset=utf-8 in your response headers.

edited Jul 13, 2015 at 18:34

answered Jul 13, 2015 at 18:11

Ryan Neuffer

7924 silver badges8 bronze badges

Collectives™ on Stack Overflow

JSON data not showing up when I change http.jsonp() URL

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related