Group Javascript Array Using Lodash

Question

Transaction.ts

export class Transaction {
    id: string;
    category: Category = new Category();
    totalPrice: number;
}

Category .ts

export class Category {
    id: string;
    name: string;
}

I have an array of Transaction as shown below.

id:"1"
category: {id: "1", name: "Plumber"}
totalPrice: 500

id:"2"
category: {id: "1", name: "Plumber"}
totalPrice: 500

id:"3"
category: {id: "2", name: "Electrician"}
totalPrice: 1000

Now I need to group that data as shown below.

I have tried to group it using lodash. But unable to format the way which I need (as shown above). Can I have any support here?

This is what I tried. It just returned individual objects. After that?

let myArray = groupBy(this.data.transactions, (n) => {
      return n.category.name;
    });

Like this (data is different here.Just dummy data)

Update:

 let a = groupBy(this.data.transactions, (n) => {
      return n.category.name;
    }).map((objs, key) => ({
      'name': key,
      'totalPrice': sumBy(objs, 'totalPrice')
    })).value();

Above gives this error:

core.es5.js:1084 ERROR Error: Uncaught (in promise): TypeError: Object(...)(...).map is not a function TypeError: Object(...)(...).map is not a function

Update 2:

  const resultArray = [...reduce(this.data.transactions,(r, { totalPrice, category: { name } }) => {
      const item = r.get(name) || {
        name,
        totalPrice: 0
      };

      item.totalPrice += totalPrice;

      return r.set(name, item);
    }, new Map()).values()];

ERROR:

ERROR Error: Uncaught (in promise): TypeError: Object(...)(...).values(...).slice is not a function TypeError: Object(...)(...).values(...).slice is not a function

Possible duplicate of [How to group data in Angular 2 ?](https://stackoverflow.com/questions/37248580/how-to-group-data-in-angular-2) — Ramesh Rajendran, Oct 06 '17 at 13:21
Hope I don't need to write `pipe` here. This is just a matter of choosing correct `Lodash` methods. Please remove the duplicate tag. @RameshRajendran — Sampath, Oct 06 '17 at 13:28

score 1 · Accepted Answer · answered Oct 06 '17 at 13:15

1

You need groupBy and sumBy,

var grouped =  _(jsonarray)
    .groupBy('category.name')
    .map((objs, key) => ({
        'name': key,
        'totalPrice': _.sumBy(objs, 'totalPrice') }))
    .value();

DEMO

var jsonarray = [{id:"1",
category: {id: "1", name: "Plumber"},
totalPrice: 500
},
{
id:"2",
category: {id: "1", name: "Plumber"},
totalPrice: 500
},
{
id:"3",
category: {id: "2", name: "Electrician"},
totalPrice: 1000
}];



var grouped =  _(jsonarray)
    .groupBy('category.name')
    .map((objs, key) => ({
        'name': key,
        'totalPrice': _.sumBy(objs, 'totalPrice') }))
    .value();

console.log(grouped);

<script src='https://cdn.jsdelivr.net/lodash/4.17.2/lodash.min.js'></script>

answered Oct 06 '17 at 13:15

Sajeetharan

216,225
63
350
396

Oh.. It's like a tsunami of Downvotes? I'm still trying to see your solution. But it is grayed :D – Sampath Oct 06 '17 at 13:21
did you run the demo and see – Sajeetharan Oct 06 '17 at 13:25
Is this lodash method `groupBy` and `map`? – Sampath Oct 06 '17 at 13:42
1

Here it gives this error: `core.es5.js:1084 ERROR Error: Uncaught (in promise): TypeError: Object(...)(...).map is not a function TypeError: Object(...)(...).map is not a function` – Sampath Oct 06 '17 at 13:58
Can you see the **Update** section on my post? – Sampath Oct 06 '17 at 14:01
Can you please **Delete** your answer? It doesn't work due to I'm using lodash modules. I'm going to delete this question. Thanks for your support. – Sampath Oct 06 '17 at 16:35
you can import loadash and use it – Sajeetharan Oct 06 '17 at 18:20
why not? its working on mine! can you create a demo? – Sajeetharan Oct 07 '17 at 01:44
Yes. I didn't use it properly with lodash modules.This answer inspired me and your one also should work. Thanks a lot :) https://stackoverflow.com/questions/46611526/groupby-with-lodash-module – Sampath Oct 07 '17 at 03:09

Group Javascript Array Using Lodash

1 Answers1