Reputation: 25
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
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
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