使用Angular访问对象中的对象数组答案

【问题标题】：Accessing array of objects in an object using Angular使用Angular访问对象中的对象数组
【发布时间】：2015-08-26 18:48:33
【问题描述】：

我正在尝试在我的视图上显示一个包含 30 个食谱的数组，其中包含来自 API 调用的数据。

  // app.js
  angular.module('recipeApp', [])
  .controller('RecipesCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.mainview = [];

  $http.get('/API')
    .then(function(response) {
      $scope.mainview = response.data;
    });

  // index.html
  <html lang="en" ng-app="recipeApp">
  <body ng-controller="RecipesCtrl">
  {{mainview}} //this outputs the same data shown on the API call.
               // when I try 'ng-repeat' nothing shows up at all

  // data from API call (this is just a sample of the data. there is really an array of 30 objects in "recipes")
  {
  "count": 30,
  "recipes": [
    {
      "publisher": "Closet Cooking",
      "f2f_url": "http://food2fork.com/view/35382",
      "title": "Jalapeno Popper Grilled Cheese Sandwich",
      "source_url": "http://www.closetcooking.com/2011/04/jalapeno-popper-grilled-cheese-sandwich.html",
      "recipe_id": "35382",
      "image_url": "http://static.food2fork.com/Jalapeno2BPopper2BGrilled2BCheese2BSandwich2B12B500fd186186.jpg",
      "social_rank": 100,
      "publisher_url": "http://closetcooking.com"
    },
    {
      "publisher": "The Pioneer Woman",
      "f2f_url": "http://food2fork.com/view/47024",
      "title": "Perfect Iced Coffee",
      "source_url": "http://thepioneerwoman.com/cooking/2011/06/perfect-iced-coffee/",
      "recipe_id": "47024",
      "image_url": "http://static.food2fork.com/icedcoffee5766.jpg",
      "social_rank": 100,
      "publisher_url": "http://thepioneerwoman.com"
    },

当我在 html 中有 {{mainview}} 时，它显示的内容与上面相同，但我怎样才能拥有它以便所有 30 个食谱都在视图中循环？我查看了 ng-repeat，但我对 Angular 很陌生，无法弄清楚。任何有关这方面的信息将不胜感激。

【问题讨论】：

标签： javascript arrays angularjs object

【解决方案1】：

你可以像这样使用 ng-repeat：

<body ng-controller="RecipesCtrl">
    <ul>
      <li ng-repeat="recipe in mainview.recipes">{{recipe}}</li>
    </ul>
</body>

它将为数组中的每个配方生成一个 li 元素。您可以使用访问配方的属性。就像在 javascript 中一样。

{{recipe.publisher}}

注意：ng-repeat 适用于任何元素，我使用 ul 和 li 仅用于显示目的。

【讨论】：

我使用这个时没有错误，也没有任何显示。
您没有在问题中发布您的 html 代码，您可以发布吗？
我用数据做了一个快速的 plunkr，它工作得很好。 :) 也许您没有向我们展示的部分代码存在问题。 plnkr.co/edit/1m6MRTXhWfqwOGi8yOrk
它不起作用的原因是因为从 API 返回的数据是一个字符串。我需要将其解析为 JSON。在那之后，你的答案奏效了。谢谢！

【解决方案2】：

这样的事情可能会对你有所帮助：

<ul>
  <li ng-repeat="recipe in mainview.recipes">
    <a href="{{recipe.source_url}}">{{recipe.title}}</a>
    <br />
    - {{recipe.publisher}}
  </li>
</ul>

【讨论】：

我使用这个时没有错误，也没有任何显示。
所以，现在这取决于您如何在视图中使用控制器。如果你使用了别名，比如ng-controller="ctrl as viewCtrl"，你需要在repeater中进行修改，比如<li ng-repeat="recipe in ctrl.mainview.recipes">，否则你可以使用上面的代码。
它不起作用的原因是因为从 API 返回的数据是一个字符串。我需要将其解析为 JSON。在那之后，你的答案奏效了。谢谢！

【解决方案3】：

我认为您正在寻找如下视图片段：

<div data-ng-repeat="item in mainview.recipes">
    <div>
        <label>Publisher</label><span>{{item.publisher}}</span>
    <div>
    <div>
        <label>Title</label><span>{{item.title}}</span>
    <div>
    ...
</div>

where ... 是您想在视图中显示的任何其他内容。文档位于：https://docs.angularjs.org/api/ng/directive/ngRepeat（虽然我知道你已经阅读过它（：）

【讨论】：

我使用这个时没有错误，也没有任何显示。