Sort Ember Object Array with Promises
I have a model
model/person
{
firstName: DS.attr( 'string'),
lastName: DS.attr( 'string'),
email: DS.attr( 'string' ),
}
and another model
model/project
{
name: DS.attr( 'string' ),
code: DS.attr( 'string' ),
startDate: DS.attr( 'date' ),
endDate: DS.attr( 'date' ),
users : DS.hasMany('person', {async: true}),
}
then i'm retrieving all the projects with as an array which contains ember objects.
since the project -> users is async its a promise. and i want to sort that array using the first name of the person. when the data is arrived accordingly and re render the hbs that is using the list
i have a computed property called
renderProjects = computed ('model.projects.')
{
// trying to sort in here but data is not avaiable so its not getting sorted
}
javascript ember.js ember-data ember-controllers
asked Nov 22 '18 at 1:56
Thilina Dinith FonsekaThilina Dinith Fonseka
109114
add a comment |
I have a model
model/person
{
firstName: DS.attr( 'string'),
lastName: DS.attr( 'string'),
email: DS.attr( 'string' ),
}
and another model
model/project
{
name: DS.attr( 'string' ),
code: DS.attr( 'string' ),
startDate: DS.attr( 'date' ),
endDate: DS.attr( 'date' ),
users : DS.hasMany('person', {async: true}),
}
then i'm retrieving all the projects with as an array which contains ember objects.
since the project -> users is async its a promise. and i want to sort that array using the first name of the person. when the data is arrived accordingly and re render the hbs that is using the list
i have a computed property called
renderProjects = computed ('model.projects.')
{
// trying to sort in here but data is not avaiable so its not getting sorted
}
javascript ember.js ember-data ember-controllers
asked Nov 22 '18 at 1:56
Thilina Dinith FonsekaThilina Dinith Fonseka
109114
add a comment |
I have a model
model/person
{
firstName: DS.attr( 'string'),
lastName: DS.attr( 'string'),
email: DS.attr( 'string' ),
}
and another model
model/project
{
name: DS.attr( 'string' ),
code: DS.attr( 'string' ),
startDate: DS.attr( 'date' ),
endDate: DS.attr( 'date' ),
users : DS.hasMany('person', {async: true}),
}
then i'm retrieving all the projects with as an array which contains ember objects.
since the project -> users is async its a promise. and i want to sort that array using the first name of the person. when the data is arrived accordingly and re render the hbs that is using the list
i have a computed property called
renderProjects = computed ('model.projects.')
{
// trying to sort in here but data is not avaiable so its not getting sorted
}
javascript ember.js ember-data ember-controllers
asked Nov 22 '18 at 1:56
Thilina Dinith FonsekaThilina Dinith Fonseka
109114
I have a model
model/person
{
firstName: DS.attr( 'string'),
lastName: DS.attr( 'string'),
email: DS.attr( 'string' ),
}
and another model
model/project
{
name: DS.attr( 'string' ),
code: DS.attr( 'string' ),
startDate: DS.attr( 'date' ),
endDate: DS.attr( 'date' ),
users : DS.hasMany('person', {async: true}),
}
then i'm retrieving all the projects with as an array which contains ember objects.
since the project -> users is async its a promise. and i want to sort that array using the first name of the person. when the data is arrived accordingly and re render the hbs that is using the list
i have a computed property called
renderProjects = computed ('model.projects.')
{
// trying to sort in here but data is not avaiable so its not getting sorted
}
javascript ember.js ember-data ember-controllers
javascript ember.js ember-data ember-controllers
asked Nov 22 '18 at 1:56
Thilina Dinith FonsekaThilina Dinith Fonseka
109114
asked Nov 22 '18 at 1:56
Thilina Dinith FonsekaThilina Dinith Fonseka
109114
asked Nov 22 '18 at 1:56
Thilina Dinith FonsekaThilina Dinith Fonseka
109114
asked Nov 22 '18 at 1:56
Thilina Dinith FonsekaThilina Dinith Fonseka
109114
asked Nov 22 '18 at 1:56
Thilina Dinith FonsekaThilina Dinith Fonseka
109114
109114
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
The solution is simply to use .@each:
renderProjects: computed ('model.projects.@each.firstName', function() {
return this.users.sortBy('firstName');
})
this will recompute the renderProjects CP whenever the list of projects change or any firstName on any of the projects changes and then automagically update your view.
One important notice: You can not do .@each.foo.bar.
This is what you did in your twiddle with model.@each.myUser.name.
In your twiddle the easiest fix is to add a computed.alias to the video model:
username: computed.alias('myUser.name'),
Then you can do this:
sortedVideos: computed('model.@each.username', function() {
return this.get('model').sortBy('username');
})
Here is a fixed twiddle.
answered Nov 22 '18 at 10:20
LuxLux
11.4k32859
Your solution was my first attempt, but it doesn't work. Please check out ember-twiddle.com/… Maybe you can fix it
– wuarmin
Nov 22 '18 at 10:39
I would be happy to find such a pleasant solution.
– wuarmin
Nov 22 '18 at 10:49
I've edited my answer
– Lux
Nov 22 '18 at 18:05
Thanks @Lux for the answer ! this also worked for me !
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
add a comment |
I would implement an observer, which watches the project array. Inside of the observer I would resolve the users-relationship sort the project array subsequently.
Please check out following code snippet.
modelObserver: observer('model.', function() {
let userPromises = this.get('model').map(project => project.get('users'));
RSVP.all(userPromises).then(function() {
this.set('sortedProjects', this.get('model').sortBy('users.firstObject.name'));
}.bind(this));
})
answered Nov 22 '18 at 8:10
wuarminwuarmin
921619
thank you for the quick response ! happy to say that it worked. i was not clear how to use promise array on that. using this example it resolved. Thank you again :)
– Thilina Dinith Fonseka
Nov 22 '18 at 10:02
1
this is a really bad idea! you should never use observers to set ember state. Usually there are very few reasons to use observers over CPs.
– Lux
Nov 22 '18 at 10:21
1
@Thilina Dinith Fonseka. Please checkout Lux's answer. His solution is how it should be in ember, much better. Please unaccept this answer.
– wuarmin
Nov 23 '18 at 7:34
@asdf thank you. i accepted your answer cause it worked for me. i will try lux answer as well.
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
add a comment |
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%2f53422860%2fsort-ember-object-array-with-promises%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
The solution is simply to use .@each:
renderProjects: computed ('model.projects.@each.firstName', function() {
return this.users.sortBy('firstName');
})
this will recompute the renderProjects CP whenever the list of projects change or any firstName on any of the projects changes and then automagically update your view.
One important notice: You can not do .@each.foo.bar.
This is what you did in your twiddle with model.@each.myUser.name.
In your twiddle the easiest fix is to add a computed.alias to the video model:
username: computed.alias('myUser.name'),
Then you can do this:
sortedVideos: computed('model.@each.username', function() {
return this.get('model').sortBy('username');
})
Here is a fixed twiddle.
answered Nov 22 '18 at 10:20
LuxLux
11.4k32859
Your solution was my first attempt, but it doesn't work. Please check out ember-twiddle.com/… Maybe you can fix it
– wuarmin
Nov 22 '18 at 10:39
I would be happy to find such a pleasant solution.
– wuarmin
Nov 22 '18 at 10:49
I've edited my answer
– Lux
Nov 22 '18 at 18:05
Thanks @Lux for the answer ! this also worked for me !
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
add a comment |
The solution is simply to use .@each:
renderProjects: computed ('model.projects.@each.firstName', function() {
return this.users.sortBy('firstName');
})
this will recompute the renderProjects CP whenever the list of projects change or any firstName on any of the projects changes and then automagically update your view.
One important notice: You can not do .@each.foo.bar.
This is what you did in your twiddle with model.@each.myUser.name.
In your twiddle the easiest fix is to add a computed.alias to the video model:
username: computed.alias('myUser.name'),
Then you can do this:
sortedVideos: computed('model.@each.username', function() {
return this.get('model').sortBy('username');
})
Here is a fixed twiddle.
answered Nov 22 '18 at 10:20
LuxLux
11.4k32859
Your solution was my first attempt, but it doesn't work. Please check out ember-twiddle.com/… Maybe you can fix it
– wuarmin
Nov 22 '18 at 10:39
I would be happy to find such a pleasant solution.
– wuarmin
Nov 22 '18 at 10:49
I've edited my answer
– Lux
Nov 22 '18 at 18:05
Thanks @Lux for the answer ! this also worked for me !
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
add a comment |
The solution is simply to use .@each:
renderProjects: computed ('model.projects.@each.firstName', function() {
return this.users.sortBy('firstName');
})
this will recompute the renderProjects CP whenever the list of projects change or any firstName on any of the projects changes and then automagically update your view.
One important notice: You can not do .@each.foo.bar.
This is what you did in your twiddle with model.@each.myUser.name.
In your twiddle the easiest fix is to add a computed.alias to the video model:
username: computed.alias('myUser.name'),
Then you can do this:
sortedVideos: computed('model.@each.username', function() {
return this.get('model').sortBy('username');
})
Here is a fixed twiddle.
answered Nov 22 '18 at 10:20
LuxLux
11.4k32859
The solution is simply to use .@each:
renderProjects: computed ('model.projects.@each.firstName', function() {
return this.users.sortBy('firstName');
})
this will recompute the renderProjects CP whenever the list of projects change or any firstName on any of the projects changes and then automagically update your view.
One important notice: You can not do .@each.foo.bar.
This is what you did in your twiddle with model.@each.myUser.name.
In your twiddle the easiest fix is to add a computed.alias to the video model:
username: computed.alias('myUser.name'),
Then you can do this:
sortedVideos: computed('model.@each.username', function() {
return this.get('model').sortBy('username');
})
Here is a fixed twiddle.
answered Nov 22 '18 at 10:20
LuxLux
11.4k32859
edited Nov 22 '18 at 18:04
answered Nov 22 '18 at 10:20
LuxLux
11.4k32859
answered Nov 22 '18 at 10:20
LuxLux
11.4k32859
answered Nov 22 '18 at 10:20
LuxLux
11.4k32859
11.4k32859
Your solution was my first attempt, but it doesn't work. Please check out ember-twiddle.com/… Maybe you can fix it
– wuarmin
Nov 22 '18 at 10:39
I would be happy to find such a pleasant solution.
– wuarmin
Nov 22 '18 at 10:49
I've edited my answer
– Lux
Nov 22 '18 at 18:05
Thanks @Lux for the answer ! this also worked for me !
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
add a comment |
Your solution was my first attempt, but it doesn't work. Please check out ember-twiddle.com/… Maybe you can fix it
– wuarmin
Nov 22 '18 at 10:39
I would be happy to find such a pleasant solution.
– wuarmin
Nov 22 '18 at 10:49
I've edited my answer
– Lux
Nov 22 '18 at 18:05
Thanks @Lux for the answer ! this also worked for me !
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
Your solution was my first attempt, but it doesn't work. Please check out ember-twiddle.com/… Maybe you can fix it
– wuarmin
Nov 22 '18 at 10:39
Your solution was my first attempt, but it doesn't work. Please check out ember-twiddle.com/… Maybe you can fix it
– wuarmin
Nov 22 '18 at 10:39
I would be happy to find such a pleasant solution.
– wuarmin
Nov 22 '18 at 10:49
I would be happy to find such a pleasant solution.
– wuarmin
Nov 22 '18 at 10:49
I've edited my answer
– Lux
Nov 22 '18 at 18:05
I've edited my answer
– Lux
Nov 22 '18 at 18:05
Thanks @Lux for the answer ! this also worked for me !
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
Thanks @Lux for the answer ! this also worked for me !
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
add a comment |
I would implement an observer, which watches the project array. Inside of the observer I would resolve the users-relationship sort the project array subsequently.
Please check out following code snippet.
modelObserver: observer('model.', function() {
let userPromises = this.get('model').map(project => project.get('users'));
RSVP.all(userPromises).then(function() {
this.set('sortedProjects', this.get('model').sortBy('users.firstObject.name'));
}.bind(this));
})
answered Nov 22 '18 at 8:10
wuarminwuarmin
921619
thank you for the quick response ! happy to say that it worked. i was not clear how to use promise array on that. using this example it resolved. Thank you again :)
– Thilina Dinith Fonseka
Nov 22 '18 at 10:02
1
this is a really bad idea! you should never use observers to set ember state. Usually there are very few reasons to use observers over CPs.
– Lux
Nov 22 '18 at 10:21
1
@Thilina Dinith Fonseka. Please checkout Lux's answer. His solution is how it should be in ember, much better. Please unaccept this answer.
– wuarmin
Nov 23 '18 at 7:34
@asdf thank you. i accepted your answer cause it worked for me. i will try lux answer as well.
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
add a comment |
I would implement an observer, which watches the project array. Inside of the observer I would resolve the users-relationship sort the project array subsequently.
Please check out following code snippet.
modelObserver: observer('model.', function() {
let userPromises = this.get('model').map(project => project.get('users'));
RSVP.all(userPromises).then(function() {
this.set('sortedProjects', this.get('model').sortBy('users.firstObject.name'));
}.bind(this));
})
answered Nov 22 '18 at 8:10
wuarminwuarmin
921619
thank you for the quick response ! happy to say that it worked. i was not clear how to use promise array on that. using this example it resolved. Thank you again :)
– Thilina Dinith Fonseka
Nov 22 '18 at 10:02
1
this is a really bad idea! you should never use observers to set ember state. Usually there are very few reasons to use observers over CPs.
– Lux
Nov 22 '18 at 10:21
1
@Thilina Dinith Fonseka. Please checkout Lux's answer. His solution is how it should be in ember, much better. Please unaccept this answer.
– wuarmin
Nov 23 '18 at 7:34
@asdf thank you. i accepted your answer cause it worked for me. i will try lux answer as well.
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
add a comment |
I would implement an observer, which watches the project array. Inside of the observer I would resolve the users-relationship sort the project array subsequently.
Please check out following code snippet.
modelObserver: observer('model.', function() {
let userPromises = this.get('model').map(project => project.get('users'));
RSVP.all(userPromises).then(function() {
this.set('sortedProjects', this.get('model').sortBy('users.firstObject.name'));
}.bind(this));
})
answered Nov 22 '18 at 8:10
wuarminwuarmin
921619
I would implement an observer, which watches the project array. Inside of the observer I would resolve the users-relationship sort the project array subsequently.
Please check out following code snippet.
modelObserver: observer('model.', function() {
let userPromises = this.get('model').map(project => project.get('users'));
RSVP.all(userPromises).then(function() {
this.set('sortedProjects', this.get('model').sortBy('users.firstObject.name'));
}.bind(this));
})
answered Nov 22 '18 at 8:10
wuarminwuarmin
921619
edited Nov 22 '18 at 8:18
answered Nov 22 '18 at 8:10
wuarminwuarmin
921619
answered Nov 22 '18 at 8:10
wuarminwuarmin
921619
answered Nov 22 '18 at 8:10
wuarminwuarmin
921619
921619
thank you for the quick response ! happy to say that it worked. i was not clear how to use promise array on that. using this example it resolved. Thank you again :)
– Thilina Dinith Fonseka
Nov 22 '18 at 10:02
1
this is a really bad idea! you should never use observers to set ember state. Usually there are very few reasons to use observers over CPs.
– Lux
Nov 22 '18 at 10:21
1
@Thilina Dinith Fonseka. Please checkout Lux's answer. His solution is how it should be in ember, much better. Please unaccept this answer.
– wuarmin
Nov 23 '18 at 7:34
@asdf thank you. i accepted your answer cause it worked for me. i will try lux answer as well.
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
add a comment |
thank you for the quick response ! happy to say that it worked. i was not clear how to use promise array on that. using this example it resolved. Thank you again :)
– Thilina Dinith Fonseka
Nov 22 '18 at 10:02
1
this is a really bad idea! you should never use observers to set ember state. Usually there are very few reasons to use observers over CPs.
– Lux
Nov 22 '18 at 10:21
1
@Thilina Dinith Fonseka. Please checkout Lux's answer. His solution is how it should be in ember, much better. Please unaccept this answer.
– wuarmin
Nov 23 '18 at 7:34
@asdf thank you. i accepted your answer cause it worked for me. i will try lux answer as well.
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
thank you for the quick response ! happy to say that it worked. i was not clear how to use promise array on that. using this example it resolved. Thank you again :)
– Thilina Dinith Fonseka
Nov 22 '18 at 10:02
thank you for the quick response ! happy to say that it worked. i was not clear how to use promise array on that. using this example it resolved. Thank you again :)
– Thilina Dinith Fonseka
Nov 22 '18 at 10:02
1
1
this is a really bad idea! you should never use observers to set ember state. Usually there are very few reasons to use observers over CPs.
– Lux
Nov 22 '18 at 10:21
this is a really bad idea! you should never use observers to set ember state. Usually there are very few reasons to use observers over CPs.
– Lux
Nov 22 '18 at 10:21
1
1
@Thilina Dinith Fonseka. Please checkout Lux's answer. His solution is how it should be in ember, much better. Please unaccept this answer.
– wuarmin
Nov 23 '18 at 7:34
@Thilina Dinith Fonseka. Please checkout Lux's answer. His solution is how it should be in ember, much better. Please unaccept this answer.
– wuarmin
Nov 23 '18 at 7:34
@asdf thank you. i accepted your answer cause it worked for me. i will try lux answer as well.
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
@asdf thank you. i accepted your answer cause it worked for me. i will try lux answer as well.
– Thilina Dinith Fonseka
Nov 26 '18 at 7:36
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%2f53422860%2fsort-ember-object-array-with-promises%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
