*ngFor force prints in ascending order
I have an object that I am trying to display in markup. But *ng keeps printing it in ascending order. Desired outcome is for elements to be printed in the order that they are. This is my stackblitz code https://stackblitz.com/edit/angular-5nr2uk
javascript html
angular typescript asked Jan 2 at 14:40
Kizito NwakaKizito Nwaka
337
|
show 2 more comments
I have an object that I am trying to display in markup. But *ng keeps printing it in ascending order. Desired outcome is for elements to be printed in the order that they are. This is my stackblitz code https://stackblitz.com/edit/angular-5nr2uk
javascript html
angular typescript asked Jan 2 at 14:40
Kizito NwakaKizito Nwaka
337
the best way is to convert the object to an array, this way you will keep the desired order
– Alon Yampolski
Jan 2 at 14:49
@AlonYampolski Not true, converting the data is more work than using the provided pipe.
– trichetriche
Jan 2 at 14:55
as per documentation, the '| keyvalue" transforms Object or Map into an array of key value pairs.
– Kizito Nwaka
Jan 2 at 14:58
@trichetriche don't forget that the order of the JSON properties might vary so that the initial assumption that they will keep their order is incorrect. This is why i suggested using an array (or a nested array) in the first place
– Alon Yampolski
Jan 2 at 15:00
@Alon if they vary, that's because the data has varied, which means the user/admin has control over the data and chose to edit it. They will keep their initial order, provided that "initial" means "unaltered data".
– trichetriche
Jan 2 at 15:03
|
show 2 more comments
I have an object that I am trying to display in markup. But *ng keeps printing it in ascending order. Desired outcome is for elements to be printed in the order that they are. This is my stackblitz code https://stackblitz.com/edit/angular-5nr2uk
javascript html
angular typescript asked Jan 2 at 14:40
Kizito NwakaKizito Nwaka
337
I have an object that I am trying to display in markup. But *ng keeps printing it in ascending order. Desired outcome is for elements to be printed in the order that they are. This is my stackblitz code https://stackblitz.com/edit/angular-5nr2uk
javascript html
angular typescript javascript html
angular typescript asked Jan 2 at 14:40
Kizito NwakaKizito Nwaka
337
asked Jan 2 at 14:40
Kizito NwakaKizito Nwaka
337
asked Jan 2 at 14:40
Kizito NwakaKizito Nwaka
337
asked Jan 2 at 14:40
Kizito NwakaKizito Nwaka
337
asked Jan 2 at 14:40
Kizito NwakaKizito Nwaka
337
337
the best way is to convert the object to an array, this way you will keep the desired order
– Alon Yampolski
Jan 2 at 14:49
@AlonYampolski Not true, converting the data is more work than using the provided pipe.
– trichetriche
Jan 2 at 14:55
as per documentation, the '| keyvalue" transforms Object or Map into an array of key value pairs.
– Kizito Nwaka
Jan 2 at 14:58
@trichetriche don't forget that the order of the JSON properties might vary so that the initial assumption that they will keep their order is incorrect. This is why i suggested using an array (or a nested array) in the first place
– Alon Yampolski
Jan 2 at 15:00
@Alon if they vary, that's because the data has varied, which means the user/admin has control over the data and chose to edit it. They will keep their initial order, provided that "initial" means "unaltered data".
– trichetriche
Jan 2 at 15:03
|
show 2 more comments
the best way is to convert the object to an array, this way you will keep the desired order
– Alon Yampolski
Jan 2 at 14:49
@AlonYampolski Not true, converting the data is more work than using the provided pipe.
– trichetriche
Jan 2 at 14:55
as per documentation, the '| keyvalue" transforms Object or Map into an array of key value pairs.
– Kizito Nwaka
Jan 2 at 14:58
@trichetriche don't forget that the order of the JSON properties might vary so that the initial assumption that they will keep their order is incorrect. This is why i suggested using an array (or a nested array) in the first place
– Alon Yampolski
Jan 2 at 15:00
@Alon if they vary, that's because the data has varied, which means the user/admin has control over the data and chose to edit it. They will keep their initial order, provided that "initial" means "unaltered data".
– trichetriche
Jan 2 at 15:03
the best way is to convert the object to an array, this way you will keep the desired order
– Alon Yampolski
Jan 2 at 14:49
the best way is to convert the object to an array, this way you will keep the desired order
– Alon Yampolski
Jan 2 at 14:49
@AlonYampolski Not true, converting the data is more work than using the provided pipe.
– trichetriche
Jan 2 at 14:55
@AlonYampolski Not true, converting the data is more work than using the provided pipe.
– trichetriche
Jan 2 at 14:55
as per documentation, the '| keyvalue" transforms Object or Map into an array of key value pairs.
– Kizito Nwaka
Jan 2 at 14:58
as per documentation, the '| keyvalue" transforms Object or Map into an array of key value pairs.
– Kizito Nwaka
Jan 2 at 14:58
@trichetriche don't forget that the order of the JSON properties might vary so that the initial assumption that they will keep their order is incorrect. This is why i suggested using an array (or a nested array) in the first place
– Alon Yampolski
Jan 2 at 15:00
@trichetriche don't forget that the order of the JSON properties might vary so that the initial assumption that they will keep their order is incorrect. This is why i suggested using an array (or a nested array) in the first place
– Alon Yampolski
Jan 2 at 15:00
@Alon if they vary, that's because the data has varied, which means the user/admin has control over the data and chose to edit it. They will keep their initial order, provided that "initial" means "unaltered data".
– trichetriche
Jan 2 at 15:03
@Alon if they vary, that's because the data has varied, which means the user/admin has control over the data and chose to edit it. They will keep their initial order, provided that "initial" means "unaltered data".
– trichetriche
Jan 2 at 15:03
|
show 2 more comments
2 Answers
2
active
oldest
votes
As per the documentation, you can provide a custom compare function to the pipe.
Simply provide a function that returns zero everytime.
customCompare(a, b) {
return 0;
}
*ngFor="let key2 of key.value | keyvalue:customCompare;"
Working stackblitz
answered Jan 2 at 14:46
trichetrichetrichetriche
28.6k42661
makes sense :) Thanks!
– Kizito Nwaka
Jan 2 at 14:59
add a comment |
As the description in official API doc:
The output array will be ordered by keys. By default the comparator
will be by Unicode point value.
This pipe also provides an optional function parameter to re-define sort order:
{{ input_expression | keyvalue [ : compareFn ] }}
(a: KeyValue, b: KeyValue) => number
More detail here
edited Jan 2 at 16:10
d219
1,34111221
answered Jan 2 at 15:08
user10858335user10858335
1
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%2f54008277%2fngfor-force-prints-in-ascending-order%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
As per the documentation, you can provide a custom compare function to the pipe.
Simply provide a function that returns zero everytime.
customCompare(a, b) {
return 0;
}
*ngFor="let key2 of key.value | keyvalue:customCompare;"
Working stackblitz
answered Jan 2 at 14:46
trichetrichetrichetriche
28.6k42661
makes sense :) Thanks!
– Kizito Nwaka
Jan 2 at 14:59
add a comment |
As per the documentation, you can provide a custom compare function to the pipe.
Simply provide a function that returns zero everytime.
customCompare(a, b) {
return 0;
}
*ngFor="let key2 of key.value | keyvalue:customCompare;"
Working stackblitz
answered Jan 2 at 14:46
trichetrichetrichetriche
28.6k42661
makes sense :) Thanks!
– Kizito Nwaka
Jan 2 at 14:59
add a comment |
As per the documentation, you can provide a custom compare function to the pipe.
Simply provide a function that returns zero everytime.
customCompare(a, b) {
return 0;
}
*ngFor="let key2 of key.value | keyvalue:customCompare;"
Working stackblitz
answered Jan 2 at 14:46
trichetrichetrichetriche
28.6k42661
As per the documentation, you can provide a custom compare function to the pipe.
Simply provide a function that returns zero everytime.
customCompare(a, b) {
return 0;
}
*ngFor="let key2 of key.value | keyvalue:customCompare;"
Working stackblitz
answered Jan 2 at 14:46
trichetrichetrichetriche
28.6k42661
answered Jan 2 at 14:46
trichetrichetrichetriche
28.6k42661
answered Jan 2 at 14:46
trichetrichetrichetriche
28.6k42661
answered Jan 2 at 14:46
trichetrichetrichetriche
28.6k42661
28.6k42661
makes sense :) Thanks!
– Kizito Nwaka
Jan 2 at 14:59
add a comment |
makes sense :) Thanks!
– Kizito Nwaka
Jan 2 at 14:59
makes sense :) Thanks!
– Kizito Nwaka
Jan 2 at 14:59
makes sense :) Thanks!
– Kizito Nwaka
Jan 2 at 14:59
add a comment |
As the description in official API doc:
The output array will be ordered by keys. By default the comparator
will be by Unicode point value.
This pipe also provides an optional function parameter to re-define sort order:
{{ input_expression | keyvalue [ : compareFn ] }}
(a: KeyValue, b: KeyValue) => number
More detail here
edited Jan 2 at 16:10
d219
1,34111221
answered Jan 2 at 15:08
user10858335user10858335
1
add a comment |
As the description in official API doc:
The output array will be ordered by keys. By default the comparator
will be by Unicode point value.
This pipe also provides an optional function parameter to re-define sort order:
{{ input_expression | keyvalue [ : compareFn ] }}
(a: KeyValue, b: KeyValue) => number
More detail here
edited Jan 2 at 16:10
d219
1,34111221
answered Jan 2 at 15:08
user10858335user10858335
1
add a comment |
As the description in official API doc:
The output array will be ordered by keys. By default the comparator
will be by Unicode point value.
This pipe also provides an optional function parameter to re-define sort order:
{{ input_expression | keyvalue [ : compareFn ] }}
(a: KeyValue, b: KeyValue) => number
More detail here
edited Jan 2 at 16:10
d219
1,34111221
answered Jan 2 at 15:08
user10858335user10858335
1
As the description in official API doc:
The output array will be ordered by keys. By default the comparator
will be by Unicode point value.
This pipe also provides an optional function parameter to re-define sort order:
{{ input_expression | keyvalue [ : compareFn ] }}
(a: KeyValue, b: KeyValue) => number
More detail here
edited Jan 2 at 16:10
d219
1,34111221
answered Jan 2 at 15:08
user10858335user10858335
1
edited Jan 2 at 16:10
d219
1,34111221
edited Jan 2 at 16:10
d219
1,34111221
edited Jan 2 at 16:10
d219
1,34111221
1,34111221
answered Jan 2 at 15:08
user10858335user10858335
1
answered Jan 2 at 15:08
user10858335user10858335
1
answered Jan 2 at 15:08
user10858335user10858335
1
1
add a comment |
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%2f54008277%2fngfor-force-prints-in-ascending-order%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
the best way is to convert the object to an array, this way you will keep the desired order
– Alon Yampolski
Jan 2 at 14:49
@AlonYampolski Not true, converting the data is more work than using the provided pipe.
– trichetriche
Jan 2 at 14:55
as per documentation, the '| keyvalue" transforms Object or Map into an array of key value pairs.
– Kizito Nwaka
Jan 2 at 14:58
@trichetriche don't forget that the order of the JSON properties might vary so that the initial assumption that they will keep their order is incorrect. This is why i suggested using an array (or a nested array) in the first place
– Alon Yampolski
Jan 2 at 15:00
@Alon if they vary, that's because the data has varied, which means the user/admin has control over the data and chose to edit it. They will keep their initial order, provided that "initial" means "unaltered data".
– trichetriche
Jan 2 at 15:03