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 co

Solution 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);
  };
});
 
});

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

Solution 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);
  
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script><bodyng-app="testApp"ng-controller="testCtrl"><ling-repeat="test in res.fsus track by $index"><spanclass="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.