Angular -使用$http获取数据时错误:[ngRepeat:dupes]

Angular - Error: [ngRepeat:dupes] when using $http to get data

本文关键字:错误 ngRepeat dupes 数据 使用 http 获取 Angular      更新时间:2023-09-26

嗨,我刚开始使用AngularJs,当使用$http获取数据和$scope时,我有问题。productinfo = data returns Error: [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>

我不确定角看到它是一个重复的dup?我一直在尝试使用track by $index,但仍然不工作,而是在视图中显示过多的重复。

当您在一个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> 

如果你仍然得到一个错误,请提供提琴/plunker。

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

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