Angularjs ng-repeat, value array by key

Question

Please help me to udestand. I can't to get an array of key value for ng-repeat (in blockquote). Nothing is displayed and no errors in console. This is my changed code:

<div class="row row-content" ng-controller = "DishDetailController">
  <blockquote ng-repeat="comment in dish">
    <p>{{comment.rating}} Stars</p>
    <p>{{comment.comment}}</p>
    <footer>John Lemon</footer>
  </blockquote>
</div>

Script:

angular.module('confusionApp', [])
.controller('DishDetailController', ['$scope', function($scope) {

var dish=[{
 name:'Uthapizza',
 image: 'images/uthapizza.png',
 category: 'mains', 
 label:'Hot',
 price:'4.99',
 description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
 comment: [
  {
   rating:5,
   comment:"Imagine all the eatables, living in conFusion!",
   author:"John Lemon",
   date:"2012-10-16T17:57:28.556094Z"
  },
  {
   rating:4,
   comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
   author:"Paul McVites",
   date:"2014-09-05T17:57:28.556094Z"
 },
 ]
 }
 ];

 $scope.dish = dish;

 }]);

@swen did you check the answer

Sajeetharan
– Sajeetharan

2016-10-31 18:31:08 +00:00
Commented Oct 31, 2016 at 18:31 — Sajeetharan
– Sajeetharan, Commented Oct 31, 2016 at 18:31
Unfortunatly it does not work. I updated the question code

I.Swen
– I.Swen

2016-10-31 19:13:53 +00:00
Commented Oct 31, 2016 at 19:13 — I.Swen
– I.Swen, Commented Oct 31, 2016 at 19:13
are you seeing any error in console?

Sajeetharan
– Sajeetharan

2016-10-31 19:17:28 +00:00
Commented Oct 31, 2016 at 19:17 — Sajeetharan
– Sajeetharan, Commented Oct 31, 2016 at 19:17
no, there are no errors

I.Swen
– I.Swen

2016-10-31 19:19:51 +00:00
Commented Oct 31, 2016 at 19:19 — I.Swen
– I.Swen, Commented Oct 31, 2016 at 19:19
can i get team viewer?

Sajeetharan
– Sajeetharan

2016-10-31 19:20:40 +00:00
Commented Oct 31, 2016 at 19:20 — Sajeetharan
– Sajeetharan, Commented Oct 31, 2016 at 19:20

Sajeetharan · Accepted Answer · 2016-10-31 19:44:59Z

2

Change,

 this.dish = dish;

to

$scope.dish = dish;

And inject $scope variable to your controller,

var app = angular.module('confusionApp', []);
app.controller('dishDetailController', function($scope) {
  var dish = [{
    name: 'Uthapizza',
    image: 'images/uthapizza.png',
    category: 'mains',
    label: 'Hot',
    price: '4.99',
    description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
    comments: [{
      rating: 5,
      comment: "Imagine all the eatables, living in conFusion!",
      author: "John Lemon",
      date: "2012-10-16T17:57:28.556094Z"
    }, {
      rating: 4,
      comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
      author: "Paul McVites",
      date: "2014-09-05T17:57:28.556094Z"
    }]
  }];
  $scope.dish = dish;
});

If you want to loop over the comments, the view should be,

<blockquote ng-repeat="comment in dish[0].comments">
   <p>{{comment .rating}} Stars</p>
   <p>{{comment .comment}}</p>
   <footer>John Lemon</footer>
</blockquote>

DEMO

edited Oct 31, 2016 at 19:44

answered Oct 31, 2016 at 18:19

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Ronald91 Over a year ago

Might be best to have an inner ng-repeat to display all the comments or a subset of the comments for a dish.

Collectives™ on Stack Overflow

Angularjs ng-repeat, value array by key

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related