Group By a custom object array in Dataviewjs

[Yerg]

Things I have tried

Read Dataview documentation, googled and also searched in this forum and did not found this specific case.

What I’m trying to do

I’m wandering how can we group rows in dataviewjs table when our source is a array of custom objects.

This is a small example of what I have:

let myArray = [];

// Lets say I can not get my objects directly from my notes. So I build them in a for loop based on the notes. 
let obj1 = { type: "a", value: 10 };
myArray.push(obj1);
let obj2 = { type: "b", value: 50 };
myArray.push(obj2);
let obj3 = { type: "a", value: 20 };
myArray.push(obj3);

// So I get to put this array of custom objects in a table
dv.table(["Type", "Value"], myArray.map(a => [a.type, a.value]));

Now, instead of just show all values in the table, how would I group by “type” in order to have the sum of “value” for each group?

If i just try to add a group by clause I get an error message like “myArray.groupBy is not a function”.

This is how I tryed:

dv.table(["Type", "Value"], myArray.groupBy(g => g.type).map(a => [a.key, a.rows.length]));

[justdoitcc]

@Yerg

If i just try to add a group by clause I get an error message like “myArray.groupBy is not a function”.

• It means that the groupBy function doesn’t support a JavaScript array.
• Therefore, a JavaScript array should be transformed into a Dataview data array so that some functions including groupBy, limit, and sort can be used in a DVJS.

Topic

Summary

• How to group by a custom object array in Dataviewjs? (DVJS10)
• How to push a custom object into a Dataview data array? (DVJS20)

---

Test

Summary

• dataview: v0.5.46

---

DVJS10_transform_a_JavaScript_array_into_a_Dataview_data_array_after_using_push

Summary

Main DVJS

Code Name	Data type	Group By	Purposes	Remark
DVJS10 _transform_a_JavaScript_array _into_a_Dataview_data_array _after_using_push	myArray: an array of JavaScript Objects	yes	To display the result as a table

Code DVJS10_transform_a_JavaScript_array_into_a_Dataview_data_array_after_using_push

Summary_code

title: DVJS10_transform_a_JavaScript_array_into_a_Dataview_data_array_after_using_push => To display the result as a table
collapse: open
icon: 
color: 
```dataviewjs
// M11. define myArray: 
// #####################################################################
let myArray = [];


// M21. define obj1 ,obj2 ,obj3: 
// Lets say I can not get my objects 
// directly from my notes. So I build them in a for loop based on the notes.
// #####################################################################
let obj1 = { type: "a", value: 10 };
let obj2 = { type: "b", value: 50 };
let obj3 = { type: "a", value: 20 };


// M23. push obj1, obj2, obj3 into myArray: 
// #####################################################################
myArray.push(obj1);
myArray.push(obj2);
myArray.push(obj3);


// M31. update myArray : 
// transform a JavaScript array into a Dataview data array by using dv.array
// #####################################################################
myArray = dv.array(myArray);


// M51. output myArray: 
// #####################################################################
dv.header(3, "M51.output myArray");
dv.table(
    ["Type", "Value"],
    myArray.map((a) => [a.type, a.value])
);


// M61. output myArray (group by g.type): 
// #####################################################################
dv.header(3, "M61.output myArray (group by g.type)");
dv.table(
    ["Type", "Value"],
    myArray.groupBy((g) => g.type).map((a) => [a.key, a.rows.length])
);


```

---

Screenshots(DVJS10)

---

DVJS20_transform_a_JavaScript_array_into_a_Dataview_data_array_before_using_push

Summary

Main DVJS

Code Name	Data type	Group By	Purposes	Remark
DVJS20 _transform_a_JavaScript_array _into_a_Dataview_data_array _before_using_push	myArray: an array of JavaScript Objects	yes	To display the result as a table

Code DVJS20_transform_a_JavaScript_array_into_a_Dataview_data_array_before_using_push

Summary_code

title: DVJS20_transform_a_JavaScript_array_into_a_Dataview_data_array_before_using_push => To display the result as a table
collapse: open
icon: 
color: 
```dataviewjs
// M11. define myArray: 
// #####################################################################
let myArray = [];


// M13. update myArray : 
// transform a JavaScript array into a Dataview data array by using dv.array
// #####################################################################
myArray = dv.array(myArray);


// M21. define obj1 ,obj2 ,obj3: Lets say I can not get my objects 
// directly from my notes. So I build them in a for loop based on the notes.
// #####################################################################
let obj1 = { type: "a", value: 10 };
let obj2 = { type: "b", value: 50 };
let obj3 = { type: "a", value: 20 };


// M23. push obj1,obj2,obj3 into myArray: 
// myArray["values"] is a JavaScript array
// #####################################################################
myArray["values"].push(obj1);
myArray["values"].push(obj2);
myArray["values"].push(obj3);


// M51. output myArray: 
// #####################################################################
dv.header(3, "M51.output myArray");
dv.table(
    ["Type", "Value"],
    myArray.map((a) => [a.type, a.value])
);


// M61. output myArray (group by g.type): 
// #####################################################################
dv.header(3, "M61.output myArray (group by g.type)");
dv.table(
    ["Type", "Value"],
    myArray.groupBy((g) => g.type).map((a) => [a.key, a.rows.length])
);

```

---

Screenshots(DVJS20)

---