Ng-repeat on template page is not displaying data
I am trying to learn angular and I am stuck trying to iterate over a div from a json object. I have confirmed that the json object is returned if I just put the paragraph tags displaying myData correctly, but my div is not repeating or even showing when I check the html in review.html. According to jsonlint my json is in effect as well. Any idea what could be wrong here?
Here is the 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 reviews.html template
<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 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 your login
+3
source to share
2 answers
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 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"}]}
0
source to share