Understanding ng-repeat for array of Objects

Question

I have the following array of objects, which is a server response. I am trying to use ng-repeat to iterate over this array and read each value.

While trying to use in html, array[0].value is working while using ng-repeat, nothing is working.

After a lot of debugging, I am unable to understand how ng-repeat is working for arrays.

Here is my example:

messages array:

[
{"Id":14,"Text":"hii hello","count":750},
{"Id":10009,"Text":"test message","count":6}
]

The following is used in html:

<div  class="my-message" layout="row" layout-align="center center">
       {{messages}} <!-- printing the above array -->
        <div ng-repat="message in messages">
       {{ message.Id}}<!-- printing nothing -->

</div>
{{ messages[0].Id }} <!-- printing 14 !-->
</div>

The array is in scope and it is also seen in this html as the {{ message }} array is printing properly.

Can someone help me understand the working of ng-repeat and where am I missing

typo in ng-repat (should be ng-repeat)?

kukkuz
– kukkuz

2016-12-07 09:10:54 +00:00
Commented Dec 7, 2016 at 9:10 — kukkuz
– kukkuz, Commented Dec 7, 2016 at 9:10
my bad on syntax.thanks

user168983
– user168983

2016-12-07 09:12:32 +00:00
Commented Dec 7, 2016 at 9:12 — user168983
– user168983, Commented Dec 7, 2016 at 9:12
expose the array on scope

Harry
– Harry

2016-12-07 09:56:31 +00:00
Commented Dec 7, 2016 at 9:56 — Harry
– Harry, Commented Dec 7, 2016 at 9:56

grogro · Accepted Answer · 2016-12-07 09:17:26Z

1

In your controller you must have :

$scope.messages = [{"Id":1,...},...]

There is a typo in your view code (ng-repat -> ng-repeat):

<div ng-repat="message in messages">
    {{ message.Id}}
</div>

must be :

<div ng-repeat="message in messages">
    {{ message.Id}}
</div>

It should be fine like this.

Have fun

answered Dec 7, 2016 at 9:17

grogro

5955 silver badges8 bronze badges

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

Comments

Sa E Chowdary · Accepted Answer · 2016-12-07 11:16:25Z

hope this will clears you

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <div  class="my-message" layout="row" layout-align="center center">
       {{messages}} <!-- printing the above array -->
        <div ng-repeat="message in messages">
       {{ message.Id}}
         {{ message.Text }} 
         {{ message.count }} 
</div>
</div>
  </body>
<script>
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.messages =[
{"Id":14,"Text":"hii hello","count":750},
{"Id":10009,"Text":"test message","count":6}
];
 
});
</script>
</html>

user168983 · Accepted Answer · 2016-12-30 11:01:10Z

0

The issue is with typo in using "ng-repeat", after correcting it my code worked normally as expected.

answered Dec 30, 2016 at 11:01

user168983

8342 gold badges10 silver badges27 bronze badges

Collectives™ on Stack Overflow

Understanding ng-repeat for array of Objects

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related