I'm having trouble getting the data from a JSON file (click on the "Json File" link to view the structure). I'm not sure what to put after "$Scope.listOfRecipe=". I tried using response.data.recipes, but it's not working and causing errors.
angular.js:12520 TypeError: Cannot read property 'recipes' of undefined at recipesController.js:10 at angular.js:10296 at angular.js:14792 at r.$eval (angular.js:16052) at r.$digest (angular.js:15870) at r.$apply (angular.js:16160) at g (angular.js:10589) at T (angular.js:10787) at XMLHttpRequest.w.onload (angular.js:10728)
Here is the Json File for reference.
This is my recipesControllers.js
var myApp = angular.module('myApp', []);
myApp.controller('namesCtrl',function ($scope, $http) {
$scope.listOfRecipe = null;
$http.get('http://164.132.196.117/chop_dev/recipe/recipes.json')
.success(function (response) {
$scope.listOfRecipe = response.data.recipes;
})
});
This is my Index.html
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in listOfRecipe ">
{{ x.Recipe.id + ', ' + x.Recipe.name }}
</li>
</ul>
</div>
<script src="C:/Users/Enetfirm Server/Desktop/AngularJs/recipesController.js"></script>
</body>
</html>