AngularJS $http reading JSON data

Question

How can i display data from an array of JSON data returned from the server in AngularJS? This is what i have, and for some reason i cannot display any data on my html page:

<script>
     function placesCtrl($scope, $http) {

          $http.get("http://somedomain/api/places_JSON.php")
          .success(function(response){
               $scope.names = response;
           });
          $scope.display = $scope.names[2].City;
      }
</script>

The JSON data that the $http.get is returning looks something like this:

[{City: "Berlin", Country: "Germany"},
{City: "Portland", Country: "USA"},
{City: "Barcelona", Country: "Spain"},
{City: "Paris", Country: "France"},
{City: "Cowes", Country: "UK"}]

Then the HTML code looks something like this:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="placesCtrl">

<p> {{display}}</p>
</div>

So instead of displaying "Barcelona" as the result, it just displays {{display}}.

Any suggestions would be much appreciated.

Please, post a demo to reproduce the issue. Try jsfiddle.net — elclanrs
– elclanrs, Commented Aug 24, 2014 at 17:29

Jason Baker · Accepted Answer · 2014-08-24 17:35:16Z

3

Your problem is that the success callback is called after you set the scope variable. Move the variable assignment inside your callback function, and you should be fine.

Also, as ryeballar points out, it's highly recommended that you as you register an application in the ng-app directive. See the tutorial for details. Although you don't need it for a simple example like this, it will make your life much, much easier as you add more components.

edited Aug 24, 2014 at 17:35

answered Aug 24, 2014 at 17:29

Jason Baker

2,4833 gold badges24 silver badges28 bronze badges

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

3 Comments

Giannis Paraskevopoulos Over a year ago

I think that wouldn't solve the problem. Displaying the curly brackets mean Angular hasn't worked properly.

Jason Baker Over a year ago

Yes, you're right. hgoebl's answer is also required

ryeballar Over a year ago

@GiannisParaskevopoulos, I think it will. the {{display}} output suggests that a problem may have occurred in the angular lifecycle. $scope.names[2].City will cause an error since $scope.names did not exist yet. @Jason, it is not necessary to name an ng-app. Try it in a plunker and it would still work. But I agree that it is not recommended.

Michael · Accepted Answer · 2014-08-24 17:55:24Z

0

You have to register your Controller. Try this:

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

myApp.controller('placesCtrl', ['$http','$scope', function($http, $scope) {
    $http.get("http://somedomain/api/places_JSON.php")
    .success(function(response){
        $scope.names = response;
    });
    $scope.display = $scope.names[2].City;
}]);

And edit your html:

<div ng-app="myApp" ng-controller="placesCtrl">

answered Aug 24, 2014 at 17:55

Michael

511 bronze badge

1 Comment

Miichi Over a year ago

That's version dependent. In the 1.2.x branch, a global function could be used as controller without registering it (that was a new feature over 1.0.x IIRC). Only recently in the 1.3.x experimental branch, this behavior was removed again: github.com/angular/angular.js/commit/…

Collectives™ on Stack Overflow

AngularJS $http reading JSON data

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related