Angularjs: Cannot display array items using ng-repeat

Question

I am using AngularJs to retrieve the data from ASP.Net Controller. The Json data is retrieved from the server, but can't figure out why cannot display array items when using the ng-repeat:

  var app = angular.module('Appp', []);
        app.controller('metadataCtrl', function ($scope, $http) {

       
            $scope.lookupItems = {};
            $http({ method: 'GET', url: '/home/listvalues?listid=3' }).then(function (response) {
                $scope.lookupItems = response;
                console.log($scope.lookupItems);
            },
               function (error) { alert("error"); });

           // console.log($scope.listItems);

        });

   <form name="myForm" ng-controller="metadataCtrl" class="my-form">
   
          <div ng-repeat="item in lookupItems">
              {{$index}}
              {{item.ListValueID}}
        </div>
   </form>

The Json Retrieved from the server:

[{"ListValueID":13,"Translation":{"TranslationID":0,"Value":"Important","LanguageValues":{"ar":"مهم","en":"Important"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0},
 
 {"ListValueID":14,"Translation":{"TranslationID":0,"Value":"Less Importance","LanguageValues":{"ar":"أقل أهمية","en":"Less Importance"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0},
 
 
 {"ListValueID":15,"Translation":{"TranslationID":0,"Value":"Very Important","LanguageValues":{"ar":"كثير الأهمية","en":"Very Important"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0}]

Are you sure that you're setting ng-app correctly in your view? Looking at it right now it should theoretically work — Jaron Thatcher
– Jaron Thatcher, Commented Mar 15, 2016 at 22:33

Lex · Accepted Answer · 2016-03-15 22:36:03Z

1

The most likely issue (assuming that your app and controller are constructed and referenced properly) is that the object returned from the promise contains a .data property which actually holds your JSON data.

Try this:

$http({ method: 'GET', url: '/home/listvalues?listid=3' })
    .then(function (response) {
        $scope.lookupItems = response.data;
        console.log($scope.lookupItems);
    },
    function (error) { 
        alert("error"); 
    });

answered Mar 15, 2016 at 22:36

Lex

7,2732 gold badges31 silver badges49 bronze badges

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

1 Comment

rleffler Over a year ago

Next time use the network tab of your browser developer tools to see what data is being brought back. Would have saved you a lot of time.

German Blanco · Accepted Answer · 2016-03-15 22:56:29Z

I think you just forgot to wrap your app with ng-app:

var app = angular.module('Appp', []);
        app.controller('metadataCtrl', function ($scope, $http) {

       
            $scope.lookupItems = {};
            
 $scope.lookupItems = [{"ListValueID":13,"Translation":{"TranslationID":0,"Value":"Important","LanguageValues":{"ar":"مهم","en":"Important"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0},
 
 {"ListValueID":14,"Translation":{"TranslationID":0,"Value":"Less Importance","LanguageValues":{"ar":"أقل أهمية","en":"Less Importance"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0},
 
 {"ListValueID":15,"Translation":{"TranslationID":0,"Value":"Very Important","LanguageValues":{"ar":"كثير الأهمية","en":"Very Important"}},"ListCategory":{"ListID":4,"Translation":{"TranslationID":0,"Value":"","LanguageValues":{"ar":"","en":""}}},"Parent":0}];
                console.log($scope.lookupItems);
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Appp">
   <form name="myForm" ng-controller="metadataCtrl" class="my-form">
   
          <div ng-repeat="item in lookupItems">
              {{$index}}
              {{item.ListValueID}}
        </div>
   </form>
</body>

Thanks @Germando, but i have specified the module on the body. This is not the issue.

rleffler · Accepted Answer · 2016-03-15 23:02:12Z

0

You probably misspelled Appp. Make sure your module definition in your javascript:

 var app = angular.module('App', []);  //Changed to App from Appp

matches your app declaration in your html

<div ng-app="App">
...controller declaration...
...body.....
</div>

answered Mar 15, 2016 at 23:02

rleffler

4701 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angularjs: Cannot display array items using ng-repeat

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related