AngularJS unable to access controller data using ng-repeat

Question

I have a section with comments that should be displayed using ng-repeat but I'm not able to access the data.

After debugging I still wasn't able to even access the data w/o modifying the controller! I'm really new to Angular so I'm really prone to making dumb mistakes.

HTML / JS

'use strict';

angular.module('commentsApp', [])       
        .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.',
                          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"
                               },
                               {
                                   rating:3,
                                   comment:"Eat it, just eat it!",
                                   author:"Michael Jaikishan",
                                   date:"2015-02-13T17:57:28.556094Z"
                               },
                               {
                                   rating:4,
                                   comment:"Ultimate, Reaching for the stars!",
                                   author:"Ringo Starry",
                                   date:"2013-12-02T17:57:28.556094Z"
                               },
                               {
                                   rating:2,
                                   comment:"It's your birthday, we're gonna party!",
                                   author:"25 Cent",
                                   date:"2011-12-02T17:57:28.556094Z"
                               }

                           ]
                    };

            $scope.dish = dish;

        }]);

<div ng-app="commentsApp">
  <div ng-controller="DishDetailController">
    <div class="col-xs-9 col-xs-offset-1">
      <div class="blockquote" ng-repeat="entry in dish.comments">
        <blockquote>
          <p>{{entry.comments.rating}} Stars</p>
          <p>{{entry.comments.comment}}</p>
          <footer>{{entry.comments.author}}, {{entry.comments.date | date}}</footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>

Drkdra · Accepted Answer · 2016-08-16 06:41:18Z

2

Your mistake here is the entry object represents an object in the dish.comments array, so to access data you just need to remove the comments parts

<div ng-app="commentsApp">
  <div ng-controller="DishDetailController">
    <div class="col-xs-9 col-xs-offset-1">
      <div class="blockquote" ng-repeat="entry in dish.comments">
        <blockquote>
          <p>{{entry.rating}} Stars</p>
          <p>{{entry.comment}}</p>
          <footer>{{entry.author}}, {{entry.date | date}}</footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>

answered Aug 16, 2016 at 6:41

Drkdra

4092 silver badges9 bronze badges

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

Comments

Bacem · Accepted Answer · 2016-08-16 06:42:02Z

1

try this:

 <div ng-app="commentsApp">
  <div ng-controller="DishDetailController">
    <div class="col-xs-9 col-xs-offset-1">
      <div class="blockquote" ng-repeat="entry in dish.comments">
        <blockquote>
          <p>{{entry.rating}} Stars</p>
          <p>{{entry.comment}}</p>
          <footer>{{entry.author}}, {{entry.date | date}}</footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>

answered Aug 16, 2016 at 6:42

Bacem

1711 silver badge11 bronze badges

Comments

zeeshan Qurban · Accepted Answer · 2016-08-16 06:55:05Z

0

you need to change your code to this

<div ng-app="commentsApp">
<div ng-controller="DishDetailController">
   <div class="col-xs-9 col-xs-offset-1">

    <div class="blockquote" ng-repeat="entry in dish.comments">
      <blockquote>
      {{entry}}
      <p>{{entry.rating}} Stars</p>
      <p>{{entry.comments}}</p>
      <footer>{{entry.author}}, {{entry.date | date}}</footer>
    </blockquote>
  </div>
</div>
</div>

here is the plunker https://plnkr.co/edit/enMspBPd1y5duq6szCrX

answered Aug 16, 2016 at 6:55

zeeshan Qurban

3871 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS unable to access controller data using ng-repeat

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