CODEWITHSUNDEEP
javascriptangularjs
Ramya Divi
Ramya Divi

Reputation: 25

Do not repeat the item which has already repeated

i have an issue where my response is like below:

[
{
    "quesListName": "Angular Data Binding Question List",
    "questions": "data binding between factory and view"
},
{
    "quesListName": "Angular Data Binding Question List",
    "questions": "data binding between factory and view"
},
{
    "quesListName": "Angular Filters Question List",
    "questions": "how to use filter date in directive in angular js ?"
},
{
    "quesListName": "Angular Filters Question List",
    "questions": " directive in angular js ?"
},
{
    "quesListName": "Controller Question List",
    "questions": " filter in angular js ?"
}

]

so i need to repeat quesListName here but the questListName should not repeat when i display it 

<ul>
  <li ng-repeat="qlist in response">
            {{qlist}}
   </li>           
 </ul>

but here i m getting all qList infact the one which has already repeat i need an output like 

Angular Data Binding Question List
Angular Filters Question List
Controller Question List

any help is highly appreciated

Upvotes: 1

Views: 68

Answers (2)

developer033
developer033

Reputation: 24894

You can do it without any library, as below:

(function() {
  "use strict";
  angular.module('app', [])
    .controller('mainCtrl', function($scope) {
      $scope.array = [  
         {  
            "quesListName":"Angular Data Binding Question List",
            "questions":"data binding between factory and view"
         },
         {  
            "quesListName":"Angular Data Binding Question List",
            "questions":"data binding between factory and view"
         },
         {  
            "quesListName":"Angular Filters Question List",
            "questions":"how to use filter date in directive in angular js ?"
         },
         {  
            "quesListName":"Angular Filters Question List",
            "questions":" directive in angular js ?"
         },
         {  
            "quesListName":"Controller Question List",
            "questions":" filter in angular js ?"
         }
      ];

      $scope.response = [];
      var unique = {};
      $scope.array.forEach(function(item) {
        if (!unique[item.quesListName]) {
          $scope.response.push(item);
          unique[item.quesListName] = item;
        }
      });
    });
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <span>With duplicates:</span>
  <ul>
    <li ng-repeat="qlist in array" ng-bind="qlist.quesListName">
    </li>
  </ul>
  <span>Without duplicates:</span>
  <ul>
    <li ng-repeat="qlist in response" ng-bind="qlist.quesListName">
    </li>
  </ul>
</body>

</html>

Note: if you're using ES6 you can remove duplicates this way:

$scope.response = $scope.array.filter((thing, index, self) => self.findIndex((t) => {
   return t.quesListName == thing.quesListName;
}) === index);

Upvotes: 0

Shaishab Roy
Shaishab Roy

Reputation: 16805

You can achieve this by using angular-filter. so you need to add angular-filter script and add dependency in your module.

In index.html: load after angular.js script

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>

In your module:

angular.module('appName', ['angular.filter']);

In HTML:

<ul>
      <li ng-repeat="qlist in response | unique:'quesListName'">
            {{qlist.quesListName}}
   </li>
<ul>

Upvotes: 3

Related Questions