ng-repeat track by $index display the item only once if the similar key exists multiple times in angularjs
I was getting [ngRepeat:dupes]: error in my angularjs code.
So I searched on stackoverflow and found the solution which stated to use track by $index. This is working for me now. But, it displays the item multiple times if the same key is present multiple times. I want to display only one item if the same key exists multiple times.
here is my sample code from the view :
<div ng-repeat="user in users | filter:myFilter track by $index">
</div>
here is the current output :
Insted of showing these two cards, I want the code to show only one card as they both are the same.
How do I do it?
javascript angularjs angularjs-ng-repeat
asked Nov 28 '18 at 8:41
node_mannode_man
542519
add a comment |
I was getting [ngRepeat:dupes]: error in my angularjs code.
So I searched on stackoverflow and found the solution which stated to use track by $index. This is working for me now. But, it displays the item multiple times if the same key is present multiple times. I want to display only one item if the same key exists multiple times.
here is my sample code from the view :
<div ng-repeat="user in users | filter:myFilter track by $index">
</div>
here is the current output :
Insted of showing these two cards, I want the code to show only one card as they both are the same.
How do I do it?
javascript angularjs angularjs-ng-repeat
asked Nov 28 '18 at 8:41
node_mannode_man
542519
You missed " and Use user in users track by $index | filter:myFilter I may helps you.
– Jain
Nov 28 '18 at 8:50
I edited the question and user in users track by $index | filter:myFilter doesn't work
– node_man
Nov 28 '18 at 8:54
Why don't you remove duplicates before passing the list to the ng-repeat?
– nadz
Nov 28 '18 at 8:57
check this out stackoverflow.com/questions/20222555/…
– holydragon
Nov 28 '18 at 8:57
Please show your users array, once
– Jain
Nov 28 '18 at 8:57
add a comment |
I was getting [ngRepeat:dupes]: error in my angularjs code.
So I searched on stackoverflow and found the solution which stated to use track by $index. This is working for me now. But, it displays the item multiple times if the same key is present multiple times. I want to display only one item if the same key exists multiple times.
here is my sample code from the view :
<div ng-repeat="user in users | filter:myFilter track by $index">
</div>
here is the current output :
Insted of showing these two cards, I want the code to show only one card as they both are the same.
How do I do it?
javascript angularjs angularjs-ng-repeat
asked Nov 28 '18 at 8:41
node_mannode_man
542519
I was getting [ngRepeat:dupes]: error in my angularjs code.
So I searched on stackoverflow and found the solution which stated to use track by $index. This is working for me now. But, it displays the item multiple times if the same key is present multiple times. I want to display only one item if the same key exists multiple times.
here is my sample code from the view :
<div ng-repeat="user in users | filter:myFilter track by $index">
</div>
here is the current output :
Insted of showing these two cards, I want the code to show only one card as they both are the same.
How do I do it?
javascript angularjs angularjs-ng-repeat
javascript angularjs angularjs-ng-repeat
asked Nov 28 '18 at 8:41
node_mannode_man
542519
asked Nov 28 '18 at 8:41
node_mannode_man
542519
edited Nov 28 '18 at 8:54
node_man
asked Nov 28 '18 at 8:41
node_mannode_man
542519
asked Nov 28 '18 at 8:41
node_mannode_man
542519
asked Nov 28 '18 at 8:41
node_mannode_man
542519
542519
You missed " and Use user in users track by $index | filter:myFilter I may helps you.
– Jain
Nov 28 '18 at 8:50
I edited the question and user in users track by $index | filter:myFilter doesn't work
– node_man
Nov 28 '18 at 8:54
Why don't you remove duplicates before passing the list to the ng-repeat?
– nadz
Nov 28 '18 at 8:57
check this out stackoverflow.com/questions/20222555/…
– holydragon
Nov 28 '18 at 8:57
Please show your users array, once
– Jain
Nov 28 '18 at 8:57
add a comment |
You missed " and Use user in users track by $index | filter:myFilter I may helps you.
– Jain
Nov 28 '18 at 8:50
I edited the question and user in users track by $index | filter:myFilter doesn't work
– node_man
Nov 28 '18 at 8:54
Why don't you remove duplicates before passing the list to the ng-repeat?
– nadz
Nov 28 '18 at 8:57
check this out stackoverflow.com/questions/20222555/…
– holydragon
Nov 28 '18 at 8:57
Please show your users array, once
– Jain
Nov 28 '18 at 8:57
You missed " and Use user in users track by $index | filter:myFilter I may helps you.
– Jain
Nov 28 '18 at 8:50
You missed " and Use user in users track by $index | filter:myFilter I may helps you.
– Jain
Nov 28 '18 at 8:50
I edited the question and user in users track by $index | filter:myFilter doesn't work
– node_man
Nov 28 '18 at 8:54
I edited the question and user in users track by $index | filter:myFilter doesn't work
– node_man
Nov 28 '18 at 8:54
Why don't you remove duplicates before passing the list to the ng-repeat?
– nadz
Nov 28 '18 at 8:57
Why don't you remove duplicates before passing the list to the ng-repeat?
– nadz
Nov 28 '18 at 8:57
check this out stackoverflow.com/questions/20222555/…
– holydragon
Nov 28 '18 at 8:57
check this out stackoverflow.com/questions/20222555/…
– holydragon
Nov 28 '18 at 8:57
Please show your users array, once
– Jain
Nov 28 '18 at 8:57
Please show your users array, once
– Jain
Nov 28 '18 at 8:57
add a comment |
2 Answers
2
active
oldest
votes
pass array into a function and create an array without the repeating values
like myFunction(users) so the repeat section will become ng-repeat="user in myFunction(users)". Write the function yourself.
answered Nov 28 '18 at 8:58
GolwinGolwin
15612
add a comment |
I fixed it like this by creating a filter:
var app = angular.module('angularTable', );
app.filter('unique', function() {
// we will return a function which will take in a collection
// and a keyname
return function(collection, keyname) {
// we define our output and keys array;
var output = ,
keys = ;
// we utilize angular's foreach function
// this takes in our original collection and an iterator function
angular.forEach(collection, function(item) {
// we check to see whether our object exists
var key = item[keyname];
// if it's not already part of our keys array
if(keys.indexOf(key) === -1) {
// add it to our keys array
keys.push(key);
// push this item to our final output array
output.push(item);
}
});
// return our array which should be devoid of
// any duplicates
return output;
};
});
app.controller('listdata', function($scope, $http) {
your controller logic for the users array
});
});
In the view :
<div ng-repeat="user in users |unique:'name' | filter:myFilter track by $index">
</div>
answered Nov 28 '18 at 8:59
node_mannode_man
542519
1
its better to use function than filter because filter will get called multiple times but function does not. See my answer.
– Golwin
Nov 28 '18 at 9:01
ok thanks let me try your solution
– node_man
Nov 28 '18 at 9:03
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53515313%2fng-repeat-track-by-index-display-the-item-only-once-if-the-similar-key-exists-m%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
pass array into a function and create an array without the repeating values
like myFunction(users) so the repeat section will become ng-repeat="user in myFunction(users)". Write the function yourself.
answered Nov 28 '18 at 8:58
GolwinGolwin
15612
add a comment |
pass array into a function and create an array without the repeating values
like myFunction(users) so the repeat section will become ng-repeat="user in myFunction(users)". Write the function yourself.
answered Nov 28 '18 at 8:58
GolwinGolwin
15612
add a comment |
pass array into a function and create an array without the repeating values
like myFunction(users) so the repeat section will become ng-repeat="user in myFunction(users)". Write the function yourself.
answered Nov 28 '18 at 8:58
GolwinGolwin
15612
pass array into a function and create an array without the repeating values
like myFunction(users) so the repeat section will become ng-repeat="user in myFunction(users)". Write the function yourself.
answered Nov 28 '18 at 8:58
GolwinGolwin
15612
answered Nov 28 '18 at 8:58
GolwinGolwin
15612
answered Nov 28 '18 at 8:58
GolwinGolwin
15612
answered Nov 28 '18 at 8:58
GolwinGolwin
15612
15612
add a comment |
add a comment |
I fixed it like this by creating a filter:
var app = angular.module('angularTable', );
app.filter('unique', function() {
// we will return a function which will take in a collection
// and a keyname
return function(collection, keyname) {
// we define our output and keys array;
var output = ,
keys = ;
// we utilize angular's foreach function
// this takes in our original collection and an iterator function
angular.forEach(collection, function(item) {
// we check to see whether our object exists
var key = item[keyname];
// if it's not already part of our keys array
if(keys.indexOf(key) === -1) {
// add it to our keys array
keys.push(key);
// push this item to our final output array
output.push(item);
}
});
// return our array which should be devoid of
// any duplicates
return output;
};
});
app.controller('listdata', function($scope, $http) {
your controller logic for the users array
});
});
In the view :
<div ng-repeat="user in users |unique:'name' | filter:myFilter track by $index">
</div>
answered Nov 28 '18 at 8:59
node_mannode_man
542519
1
its better to use function than filter because filter will get called multiple times but function does not. See my answer.
– Golwin
Nov 28 '18 at 9:01
ok thanks let me try your solution
– node_man
Nov 28 '18 at 9:03
add a comment |
I fixed it like this by creating a filter:
var app = angular.module('angularTable', );
app.filter('unique', function() {
// we will return a function which will take in a collection
// and a keyname
return function(collection, keyname) {
// we define our output and keys array;
var output = ,
keys = ;
// we utilize angular's foreach function
// this takes in our original collection and an iterator function
angular.forEach(collection, function(item) {
// we check to see whether our object exists
var key = item[keyname];
// if it's not already part of our keys array
if(keys.indexOf(key) === -1) {
// add it to our keys array
keys.push(key);
// push this item to our final output array
output.push(item);
}
});
// return our array which should be devoid of
// any duplicates
return output;
};
});
app.controller('listdata', function($scope, $http) {
your controller logic for the users array
});
});
In the view :
<div ng-repeat="user in users |unique:'name' | filter:myFilter track by $index">
</div>
answered Nov 28 '18 at 8:59
node_mannode_man
542519
1
its better to use function than filter because filter will get called multiple times but function does not. See my answer.
– Golwin
Nov 28 '18 at 9:01
ok thanks let me try your solution
– node_man
Nov 28 '18 at 9:03
add a comment |
I fixed it like this by creating a filter:
var app = angular.module('angularTable', );
app.filter('unique', function() {
// we will return a function which will take in a collection
// and a keyname
return function(collection, keyname) {
// we define our output and keys array;
var output = ,
keys = ;
// we utilize angular's foreach function
// this takes in our original collection and an iterator function
angular.forEach(collection, function(item) {
// we check to see whether our object exists
var key = item[keyname];
// if it's not already part of our keys array
if(keys.indexOf(key) === -1) {
// add it to our keys array
keys.push(key);
// push this item to our final output array
output.push(item);
}
});
// return our array which should be devoid of
// any duplicates
return output;
};
});
app.controller('listdata', function($scope, $http) {
your controller logic for the users array
});
});
In the view :
<div ng-repeat="user in users |unique:'name' | filter:myFilter track by $index">
</div>
answered Nov 28 '18 at 8:59
node_mannode_man
542519
I fixed it like this by creating a filter:
var app = angular.module('angularTable', );
app.filter('unique', function() {
// we will return a function which will take in a collection
// and a keyname
return function(collection, keyname) {
// we define our output and keys array;
var output = ,
keys = ;
// we utilize angular's foreach function
// this takes in our original collection and an iterator function
angular.forEach(collection, function(item) {
// we check to see whether our object exists
var key = item[keyname];
// if it's not already part of our keys array
if(keys.indexOf(key) === -1) {
// add it to our keys array
keys.push(key);
// push this item to our final output array
output.push(item);
}
});
// return our array which should be devoid of
// any duplicates
return output;
};
});
app.controller('listdata', function($scope, $http) {
your controller logic for the users array
});
});
In the view :
<div ng-repeat="user in users |unique:'name' | filter:myFilter track by $index">
</div>
answered Nov 28 '18 at 8:59
node_mannode_man
542519
edited Nov 28 '18 at 9:03
answered Nov 28 '18 at 8:59
node_mannode_man
542519
answered Nov 28 '18 at 8:59
node_mannode_man
542519
answered Nov 28 '18 at 8:59
node_mannode_man
542519
542519
1
its better to use function than filter because filter will get called multiple times but function does not. See my answer.
– Golwin
Nov 28 '18 at 9:01
ok thanks let me try your solution
– node_man
Nov 28 '18 at 9:03
add a comment |
1
its better to use function than filter because filter will get called multiple times but function does not. See my answer.
– Golwin
Nov 28 '18 at 9:01
ok thanks let me try your solution
– node_man
Nov 28 '18 at 9:03
1
1
its better to use function than filter because filter will get called multiple times but function does not. See my answer.
– Golwin
Nov 28 '18 at 9:01
its better to use function than filter because filter will get called multiple times but function does not. See my answer.
– Golwin
Nov 28 '18 at 9:01
ok thanks let me try your solution
– node_man
Nov 28 '18 at 9:03
ok thanks let me try your solution
– node_man
Nov 28 '18 at 9:03
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53515313%2fng-repeat-track-by-index-display-the-item-only-once-if-the-similar-key-exists-m%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You missed " and Use user in users track by $index | filter:myFilter I may helps you.
– Jain
Nov 28 '18 at 8:50
I edited the question and user in users track by $index | filter:myFilter doesn't work
– node_man
Nov 28 '18 at 8:54
Why don't you remove duplicates before passing the list to the ng-repeat?
– nadz
Nov 28 '18 at 8:57
check this out stackoverflow.com/questions/20222555/…
– holydragon
Nov 28 '18 at 8:57
Please show your users array, once
– Jain
Nov 28 '18 at 8:57