current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question
    
Please, post a demo to reproduce the issue. Try jsfiddle.net –  elclanrs Aug 24 '14 at 17:29

2 Answers 2

up vote 3 down vote accepted

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.

share|improve this answer
    
I think that wouldn't solve the problem. Displaying the curly brackets mean Angular hasn't worked properly. –  Giannis Paraskevopoulos Aug 24 '14 at 17:31
    
Yes, you're right. hgoebl's answer is also required –  Jason Baker Aug 24 '14 at 17:32
1  
@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. –  ryeballar Aug 24 '14 at 17:34
    
@ryeballar I did not know that; thank you –  Jason Baker Aug 24 '14 at 17:35
up vote 0 down vote

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">
share|improve this answer
    
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/… –  Miichi Aug 24 '14 at 18:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.