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

Question

我有一个简单的angular函数，可从JSON对象获取category属性并返回每个唯一值。 但是，当我通过这些值进行ng-repeat时，我只会得到第一个字母，而不是单词。 我敢肯定，这只是我对Java脚本的一些小误解，但是任何帮助都会很棒。 除了下面我粘贴的内容外，请参考我的CodePen

Angular JS：

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属性，因此不需要遍历对象。 因此，您此时可以使用该对象。