1

I'm doing the AngularJS tutorial, and I simply can't get the following to work, even though the code is exactly like the one in the tutorial -

controller.js-

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

phoneApp.controller('PhoneCtrl', function ($scope, $http) {
$http.get('https://github.com/angular/angular-phonecat/blob/master/app/phones/phones.json').success(function(data) {
$scope.phones = data;
});

$scope.orderProp = 'age';
});

HTML -

<!DOCTYPE html>
<html lang="en" ng-app="phoneApp">
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="controller.js"></script>

<body ng-controller="PhoneCtrl">

Search: <input ng-model="query" >

<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>

<ul >
    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    {{phone.name}}  
    <p>{{phone.snippet}}</p>
    <p>{{phone.foo}}</p>
    </li>
</ul>   

</body>

</html>

This does nothing, I can't see the data from the JSON file

Could somebody please point out what I'm missing? Thanks!

thomas
  • 1,133
  • 1
  • 12
  • 31
  • Well https://github.com/angular/angular-phonecat/blob/master/app/phones/phones.json does not resolve in a JSON file but resolved in an HTML content. You need to host that file in a server that returns a JSON response. – Aidin Mar 07 '14 at 21:47
  • Well, it's normal, the result of the 'GET' request is a string not a json – massintha Mar 07 '14 at 21:47
  • @Aidin, why can't I get a JSON response if the file is locally saved on my computer? – thomas Mar 07 '14 at 21:50
  • 1
    Please read the response given in here: http://stackoverflow.com/questions/16930473/angularjs-factory-http-get-json-file – Aidin Mar 07 '14 at 21:53

2 Answers2

4

your json is not actually json... its the github page... you want this url

https://raw.github.com/angular/angular-phonecat/master/app/phones/phones.json

Nathaniel Currier
  • 344
  • 1
  • 5
  • That still doesn't work... Also, it didn't work when I had it saved on my computer as a .json file (would appreciate if somebody could direct me to an explanation about why it has to be on a server) – thomas Mar 07 '14 at 21:54
  • this would be why it doesnt load locally http://en.wikipedia.org/wiki/Same-origin_policy – Nathaniel Currier Mar 07 '14 at 21:59
  • it could be that github doesnt send the correct mime-type for json when using the "raw" urls, not sure. – Nathaniel Currier Mar 07 '14 at 22:01
  • Ok, I think I get it. The browser won't let me read the JSON files from the github servers because of the same-origin policy, but why is it that I can access the local json file only when using Firefox? – thomas Mar 07 '14 at 22:07
  • chrome and firefox have slightly different security models regarding local files – Nathaniel Currier Mar 07 '14 at 22:13
0

The problem is not with your client but with your server

See https://rawgit.com/faq

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

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

phoneApp.controller('PhoneCtrl', function ($scope, $http) {
$http.get('http://cdn.rawgit.com/angular/angular-phonecat/master/app/phones/phones.json').success(function(data) {
$scope.phones = data;
});

$scope.orderProp = 'age';
});
Ahmad Shahin
  • 1
  • 2