Angular - 使用 $http 获取数据时出现错误：[ngRepeat:dupes]答案

【问题标题】：Angular - Error: [ngRepeat:dupes] when using $http to get dataAngular - 使用 $http 获取数据时出现错误：[ngRepeat:dupes]
【发布时间】：2015-10-08 05:03:06
【问题描述】：

您好，我刚开始使用 AngularJs，我在使用 $http 获取数据时遇到问题，$scope.productInfos = data 返回错误：[ngRepeat:dupes]，下面是我的代码：

$scope.processForm = function(formData) {

        $http({

          method  : 'POST',

          url: '/quote-tool/productinfoforproductids/', // using php to generate json i.e [{id:1},{id:2}]

          data: $('.js-checkedCompareForm').serialize(),

          headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)

         }).success(function(result) {

            $scope.productInfos = result;

         }).error(function(err) {

             return err; 

        });
    };

在视图中：

<div class="js-productInfo" ng-repeat="productInfo in productInfos">
    {{ productInfo.id }}
</div>

我不确定 Angular 是否将其视为重复的重复？我一直在尝试通过 $index 使用 track，但仍然无法正常工作，它在视图中显示过多的重复。

【问题讨论】：

为了帮助您解决此问题，我们需要查看$scope.productInfos 中的示例以及错误输出的样子。
嗨@Mike，您能否向我们提供从您的http 调用返回的数据？
@Mike，如果您不能给出确切的结果，请给我们示例数据。并检查错误消息中指定的结果中是否有任何重复条目。

标签： javascript angularjs http ng-repeat

【解决方案1】：

当您在 ngRepeat 表达式中有重复键时会发生这种类型的错误。可能使用 track by $index 将解决您的问题。查看此链接：https://docs.angularjs.org/error/ngRepeat/dupes

<div class="js-productInfo" ng-repeat="productInfo in productInfos track by $index">
    {{ productInfo.id }}
</div>

如果您仍然遇到错误，请提供 fiddle/plunker。

【讨论】：

【解决方案2】：

我设法找到了问题，它是由 php 生成的 json 文件引起的，该文件生成了错误的 json 格式，导致数据响应出错。

was: {id:1},{id:2}

 should be:  {
    "productInfos":[
      {id:1},
      {id:2}
    ]
  }

【讨论】：