CODEWITHSUNDEEP
angularjs
sef9110
sef9110

Reputation: 153

ng-repeat in template page shows no data

I am trying to learn angular and I am stuck trying to repeat a div from a json object. I have confirmed that the json object is being returned, if I just put the paragraph tags display myData correctly but my div is not repeating or even showing when I inspect the html in review.html. According to jsonlint my json is valid as well. Any idea what could be wrong here?

Here is index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>All The Reviews</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<script src="myScript.js"></script>
</head>

<body ng-app="myApp">
<div ng-controller="homeController">
 <div>
  <nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#/">Home<span class="sr-only">(current)</span></a></li>
    <li><a href="#/reviews">Reviews</a></li>
    <li><a href="#/create">Create</a></li>
   </ul>
  </nav>
 </div>
<br/>
  <div ng-view class="jumbotron"></div>
</div>
</body>
</html>

Here is my template reviews.html

<div style="padding-left:130px;padding-right:200px;">
 <h1>Reviews</h1>
 <p>{{myData}}</p>
 <div ng-repeat="review in myData.reviews">{{review.title}}</div>
</div>

Here is my js file

var app=angular.module('myApp',['ngRoute']);


app.config(function($routeProvider){


  $routeProvider
      .when('/',{
            templateUrl: 'home.html',
            controller: 'homeController'
      })
      .when('/reviews',{
            templateUrl: 'reviews.html',
            controller: 'reviewsController'
      });


});


app.controller('homeController',function($scope, $http){

});

app.controller('reviewsController',function($scope, $http){

 $scope.myData={};

 $http.get('myData.json').success(function(data) {
  $scope.myData = data;
 });

});

And here is my json data

[{"products":[{"productId":"1","name":"Fluffy Eggs"},{"productId":"1","name":"Crispy Bacon"}]},
{"reviews":[{"reviewId":"1","title":"These are some nice eggs.","productId":"1","description":"Eggs that are just the right temp and extremely fluffy."},
{"reviewId":"2","title":"mmm, bacon","productId":"2","description":"it's pretty crispy. Maybe a little too crispy."}]},
{"ratings":[{"ratingId":"1","reviewId":"1","rating":"5"},
{"ratingId":"2","reviewId":"1","rating":"4"},
{"ratingId":"3","reviewId":"2","rating":"1"},
{"ratingId":"4","reviewId":"1","rating":"5"},
{"ratingId":"5","reviewId":"1","rating":"5"},
{"ratingId":"6","reviewId":"2","rating":"5"},
{"ratingId":"7","reviewId":"2","rating":"4"},
{"ratingId":"8","reviewId":"1","rating":"5"}]}]

Thanks for all your input

Upvotes: 3

Views: 95

Answers (2)

shivas
shivas

Reputation: 923

Change your json to:

{"products":[{"productId":"1","name":"Fluffy Eggs"},{"productId":"1","name":"Crispy Bacon"}],
"reviews":[{"reviewId":"1","title":"These are some nice eggs.","productId":"1","description":"Eggs that are just the right temp and extremely fluffy."},
{"reviewId":"2","title":"mmm, bacon","productId":"2","description":"it's pretty crispy. Maybe a little too crispy."}],
"ratings":[{"ratingId":"1","reviewId":"1","rating":"5"},
{"ratingId":"2","reviewId":"1","rating":"4"},
{"ratingId":"3","reviewId":"2","rating":"1"},
{"ratingId":"4","reviewId":"1","rating":"5"},
{"ratingId":"5","reviewId":"1","rating":"5"},
{"ratingId":"6","reviewId":"2","rating":"5"},
{"ratingId":"7","reviewId":"2","rating":"4"},
{"ratingId":"8","reviewId":"1","rating":"5"}]}

Upvotes: 0

Reto Aebersold
Reto Aebersold

Reputation: 16624

Your JSON structure is an array containing the three objects with the properties products, reviews and ratings. Therefore you have to select the second item to loop over your reviews:

<div ng-repeat="review in myData[1].reviews">{{review.title}}</div>

See this plnkr

Upvotes: 3

Related Questions