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
