как правильно показывать данные из файла Json с AngularJS

0

Мне нужно получить данные из json файла ниже (пожалуйста, нажмите ссылку "Json файл", чтобы посмотреть, как эта структура Json файла), но я запутался, что мне следует положить после "$ Scope.listOfRecipe =", я ответил.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="/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="/recipesController.js"></script>
</body>

</html>
  • 1
    Ваше сообщение об ошибке указывает, что response.data не существует. Вы проверили содержание response чтобы увидеть, содержит ли оно то, что вы ожидаете?
  • 0
    Вы должны быть в состоянии сделать response.recipes . Если нет, можете ли вы поставить console.log(response) ? Откройте консоль браузера и посмотрите, получаете ли вы ответ от сервера.
Показать ещё 4 комментария
Теги:

2 ответа

0
Лучший ответ

Вы можете 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 ...
  });
Поделиться
  • 0
    Спасибо, я использовал console.log (response), он помогает мне найти ошибки и проблемы. «поймать» и «наконец» это хорошо.
0

Можете ли вы проверить загрузку файла на инструментах разработчика - вкладке в сети?

Убедитесь, что он работает, и, пожалуйста, console.log response и response.data, чтобы проверить его там!

Это файл Json означает, что ответ - это сам Json, а не res.data

Пожалуйста, проверьте его и ответьте, чтобы поделиться своим решением

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню