Question

我需要从下面的json文件中获取数据（请单击＆＃34; Json文件＆＃34;链接以查看Json文件的结构如何）但我很困惑我应该放在＆＃34之后; $ Scope.listOfRecipe =＆＃34;，我把response.data.recipes，但它没有在这里工作，并且有一些错误。

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)

Json File这是我的json文件

这是我的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;
     })

});

这是我的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>

Answer 1

您是否可以在开发人员工具 - 网络标签上验证文件正在下载？

确保它正常工作，请调试console.log响应和response.data以验证其存在！

它是一个Json文件意味着响应是它自己的Json而不是res.data

请检查并回复以分享您的解决方案

Answer 2

您可console.log(response)查看回复内容并相应调整代码。

但我建议使用标准的承诺模式：

$http.get('http://164.132.196.117/chop_dev/recipe/recipes.json')
  .then(function(resp) {
    $scope.listOfRecipe = resp.data.recipes;
  })
  .catch(function(errResp) {
    // catch error
  })
  .finally(function() {
    // when it is done do something in the view
    // remove a spinner gif or scroll to top ...
  });

如何使用AngularJS以正确的方式显示Json文件中的数据

2 个答案: