Angular ng-repeat with Json and $http ajax displays an empty list

Question

I'm trying to display a list of elements by name and id with ng-repeat from a json with a super simple ajax request.

    var form = $("#loadAllServiceEngineForm");
    var url = form.attr("action");

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

    App.controller('locContol', function($scope, $http) {
        // Simple GET request
        $http.get(url).
          success(function(data) {
              $scope.locations = angular.fromJson(data);
              console.log(data);
          }).
          error(function(data) {
              console.error("NON CARICA I DATI");
        });
     });

In this list

    <body ng-app="AdamApp">
     <div ng-controller="locContol">
        <ul>
            <li ng-repeat="location in locations |  orderBy: 'id'">
                <div>{{location.name}}-{{location.id}}</div>
            </li>
        </ul>
     </div>
   </body>

The strange thing is which it return a list of empty <li>, and in console i see the strange Array attached.

And this is the full json in console.log.

I don't know angular, i'm just trying for the first time... but i see the difference between jQuery ie. when i call the same json with $.ajax and then parse with JSON.parse(data[i]); it display in console an ordinate list of objects instead this strange array of objects.

How i can get a same result in angular?

When going from jquery to angular, do not think like jquery! I too made this same mistake, it has a totally different take on things. Use the .then method while will give you the response data available and you wont need to do any json parsing. — Shannon Hochkins, Commented May 26, 2016 at 11:27
don't write $scope.locations = angular.fromJson(data);. then check your console — Avantika Saini, Commented May 26, 2016 at 11:29
i've added an other image with the full json in console. — Emanuele, Commented May 26, 2016 at 11:45

Aditya Singh · Accepted Answer · 2016-05-26 12:19:31Z

0

Try using .then instead of .success to handle the callback. Also use response.data to get the parsed JSON response

$http.get(url)
     .then(function(response) {
          $scope.locations = response.data;
          console.log(response.data);
      })
      .catch(function(data) {
          console.error("NON CARICA I DATI");
      });

For handling the error you can either pass the error callback as second parameter to .then or as part of .catch parameter. The preferred way is to use .catch as it handles errors, if any, from the success callback as well.

UPDATED HTML

<li ng-repeat="location in locations track by $index |  orderBy: 'id'">
  <div>{{location.name}}-{{location.id}}</div>
</li>

edited May 26, 2016 at 12:19

answered May 26, 2016 at 11:15

Aditya Singh

16.7k15 gold badges48 silver badges69 bronze badges

Thanks for the response. The error i get is: ReferenceError: data is not defined
– Emanuele
Commented May 26, 2016 at 11:31
ofcourse data is not defined. One cannot simply write response.data unless we know there is a key data in the response object
– Avantika Saini
Commented May 26, 2016 at 11:32
I've try to make console.log(response) to see the full json. I've added an other image. I see the data as an Array with other two array inside... i'm wrong?
– Emanuele
Commented May 26, 2016 at 11:41
Sorry. It was a typo from copy paste. It should be response.data instead of data. Now the code should log and work fine
– Aditya Singh
Commented May 26, 2016 at 12:05
Yes, with response.data it get the Array i've posted in the first image and the ui is an empty list of <li> with nothing inside
– Emanuele
Commented May 26, 2016 at 12:10

| Show 3 more comments

Collectives™ on Stack Overflow

Angular ng-repeat with Json and $http ajax displays an empty list

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related