How to collect sub arrays are new Arrays using `computed` method? - arrays

Question

I have a list of arrays which contains sub arrays. how to collect those arrays and return them as new array?
here is my attempt but it does not work:
transactions: Ember.computed.map('model.cardList', function(card, index ){
return card.get('transactions');
},[]), // collecting all sub arrays but not works!!
sortedCards: Ember.computed(function(){
return this.get('model.cardList'); //length 4
}.property([])), //can i store here?
What is the correct way to collect the sub arrays from parent arrays? It is required for sorting purpose.
Thanks in advance.
Trying here, but nothing works:
Twiddle
Update
According to the twiddle, I would like to print the categoryName with fruit name(s) as a list.

Answer 1

If your solution at the end demands working with arrays of arrays and keeping them sorted, look at the following solution.
I have added a new field called origin to your model so that we have another field to sort by:
model(){
return {
"values" : [
{
"category" : "categoryD",
"origin": "Kongo",
"fruits" :[{"name":"banana"},{"name":"gova"}]
},
{
"category" : "categoryA",
"origin": "Italy",
"fruits" :[{"name":"apple"},{"name":"orange"}]
},
{
"category" : "categoryC",
"origin": "Marocco",
"fruits" :[{"name":"pineapple"}]
},
{
"category" : "categoryB",
"origin": "Brasil",
"fruits" :[{"name":"mongo"}]
}
]
}
}
And this is how your controller may look if you want to keep the sorting field dynamic:
import Ember from 'ember';
export default Ember.Controller.extend({
shouldSortByCategory: true,
values: Ember.computed.reads('model.values'),
valuesSortingDynamic: Ember.computed('shouldSortByCategory', function(){
return (Ember.get(this, 'shouldSortByCategory') ? ['category:asc'] : ['origin:asc'])
}),
valuesSortedDynamically: Ember.computed.sort('values', 'valuesSortingDynamic'),
actions: {
changeSortField(){
this.toggleProperty('shouldSortByCategory');
},
},
});
I do not care about sorting direction now (asc vs desc), but the field by which we sort is dynamic: category vs origin and is distinguished by the shouldSortByCategory flag.
The template looks pretty much the same:
<ul>
{{#each valuesSortedDynamically as |value|}}
<li>
{{#if shouldSortByCategory}}
<strong>{{value.category}}</strong> - {{value.origin}}
{{else}}
<strong>{{value.origin}}</strong> - {{value.category}}
{{/if}}
<ul>
{{#each value.fruits as |fruit|}}
<li>{{fruit.name}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
Adjusted twiddle is to be found here: twiddle with dynamic sorting.
UPDATE
Cumulating all fruits into a single array preserving info about the category they belong to can be achieved as follows:
arrayOfFruitsArray: Ember.computed('model.values.[]', function(){
const values = this.get('model.values');
const cumulatedfruits = Ember.A();
values.forEach((value)=>{
const category = Ember.get(value, 'category');
const fruits = Ember.get(value, 'fruits');
fruits.forEach((fruit)=>{
fruit.category = category;
cumulatedfruits.pushObject(fruit);
})
});
return cumulatedfruits;
})
Updated twiddle.

Answer 2

In your case you don't even have to compute sub-arrays of array.
Given the model that you load as follows (taken from your twiddle):
export default Ember.Route.extend({
model(){
return {
"values" : [
{
"category" : "category1",
"fruits" :[{"name":"banana"},{"name":"gova"}]
},
{
"category" : "category2",
"fruits" :[{"name":"apple"},{"name":"orange"}]
},
{
"category" : "category3",
"fruits" :[{"name":"pineapple"}]
},
{
"category" : "category4",
"fruits" :[{"name":"mongo"}]
}
]
}
}
});
It's enough that you iterate over your arrays in the template:
<ul>
{{#each model.values as |value|}}
<li>
{{value.category}}
<ul>
{{#each value.fruits as |fruit|}}
<li>{{fruit.name}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
Here is the respective Gist. Note that the only file I touched is the template.