javascript - Angular forEach 返回第一个字母而不是整个单词

Question

我有一个简单的 Angular 函数来从 JSON 对象获取类别属性并返回每个唯一值。然而，当我通过这些值进行 ng-repeat 时，我只得到第一个字母而不是单词。我确信这只是我对 java 脚本的一些小误解，但任何帮助都会很棒。除了下面我粘贴的作品外，请引用我的 CodePen

AngularJS:

angular.module('app', ['ngAnimate'])

.controller('starWarsCtrl', function ($scope) {
  $scope.data = [
    {"name": "Obi-Wan Kenobi",
     "index":88,
      "cat": "jedi"},
    {"name": "Yoda",
     "index":69,
      "cat":"jedi"},
    {"name": "Lando",
     "index":31,
      "cat": "smuggler"},
    {"name": "Han Solo",
     "index":90,
      "cat": "smuggler"},
    {"name": "Darth Vader",
     "index":98,
      "cat": "sith"},
    {"name": "Jar-Jar Binks",
     "index":80,
      "cat": "alien"},
    {"name": "Mace Windu",
     "index":45,
      "cat": "jedi"},
    {"name": "Chewy",
     "index":76,
      "cat": "smuggler"}
  ];

  $scope.getCategories = function() {
    var categories = [];

     angular.forEach($scope.data, function(item) {
      angular.forEach(item.cat, function(category) {
        if (categories.indexOf(category) == -1) {
          categories.push(category);
        }
      })
    });
    return categories;
  }

})

HTML:

<div data-ng-app="app" data-ng-controller="starWarsCtrl">
    <ul>
        <li class="box" data-ng-repeat="cat in getCategories()">
          <h2>{{cat}}</h2>
      </li>
    </ul>
</div>

Answer 1

您的第二个 forEach 循环正在处理字符串。甚至不需要第二个循环。

angular.forEach($scope.data, function(item) {
    //item.cat is a string
    if (categories.indexOf(item.cat) == -1) {
      categories.push(item.cat);
    }
});

您的第一个 forEach 循环访问 scope.data 中的每个项目。这些项目是 JS 对象。我不太熟悉 Angular 和可用的循环，但通常不能像对象一样循环数组。但是，您不需要循环遍历该对象，因为您只需检查 cat 属性。所以此时您可以直接使用该对象。