How to remove duplicate value of key in angular js ng-repeat?

问题

I am using ng-repeat for array json value. But I want to remove duplicate value from UI(HTML). Like Car value is repeating, So I want to remove duplicate key value. It should be come one time.

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
   $scope.res ={};
   $scope.res.fsus = [
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "var"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "ban"
        }
      }
    }
  }
];
 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<li ng-repeat="test in res.fsus track by $index">
  <span class="step">    {{test.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode}}
  </span> 
</li>
</body>

回答1:

You do not have to use any external library, simply use angular.forEach to remove the repeated elements,

angular.forEach($scope.res.fsus,function(key,value){
  if(($scope.opts.indexOf(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode , 0)) <= -1){    $scope.opts.push(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode);
  };
});

DEMO

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
   $scope.res ={};
   $scope.res.fsus = [
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "var"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "ban"
        }
      }
    }
  }
];

$scope.opts = [];
angular.forEach($scope.res.fsus,function(key,value){
  if(($scope.opts.indexOf(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode , 0)) <= -1){    $scope.opts.push(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode);
  };
});
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<li ng-repeat="test in opts">
  <span class="step">    {{test}}
  </span> 
</li>
</body>

回答2:

You can use, lodash _.uniqWith along with _.isEqual to remove the equal object from the collection of objects. Read more about lodash uniqWith.

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
  $scope.res ={};
  fake = ['var', 'car', 'car', 'ban', 'car']
  $scope.res.fsus = fake.map( val => {
    return {
      "statusMessageType": {
        "MasterConsignment": {
          "ReportedStatus": {
            "ReasonCode": val
          }
        }
      }
    };
  })
  $scope.res.fsus = _.uniqWith($scope.res.fsus, _.isEqual);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
  <li ng-repeat="test in res.fsus track by $index">
    <span class="step">
      {{ test.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode }}
    </span> 
  </li>
</body>

Note: Maybe @Sajeetharan is right to use native code rather than external lib code, but if you are already using lodash in rest of your project(like me), you should stick with lodash for this one also.

来源：https://stackoverflow.com/questions/46013497/how-to-remove-duplicate-value-of-key-in-angular-js-ng-repeat

标签

javascript

angularjs

angularjs-ng-repeat