how to filter the response data & show the distinct values using angular 2/4

Question

i am getting a dynamic data from the web api below is my response data

0
:
{CName: "a", Amt: 93027.51}
1
:
{ CName: "b", Amt: 32137.65}
2
:
{CName: "c", Amt: 54970.65}
3
:
{CName: "d", Amt: 30178.65}
4
:
{CName: "e",Amt: 1258}
5
:
{CName: "a",Amt: 1356}
6
:
{CName: "b",Amt: 1860}
7
:
{CName: "c",Amt: 1564}
8
:
{CName: "d", Amt: 1924}
9
:
{CName: "e",Amt: 15224}

10 : {CName: "e",Amt: 124}

here what my issue is here there is column named CName is there in that there are values that repeating multiple time like a,b,c repeated 2 times here what i want to know is there any possibility that we can distinct/ group these data including amt i mean totaling the distinct ?

below is my service code service.ts

getId(data) { 
    var url='http://xxxx.xxxx.x.xx/test/api/Data';

    debugger;
    return this.http.post(url,data).map(result => {
      return result.json();
    });
  }

and by using the subscribe im consuming like this from service

 this.serv.getId(this.table).subscribe(result=>{
      this.Total=0;

      if(result!=null)
        this.resultData=result.Table;
      for(var i=0;i<this.resultData.length;i++){
        console.log(this.resultData);

        this.Total=this.Total+parseFloat(this.resultData[i].amt);
      }
    },error=>{

      console.log(error)})

  }

With reference to the @Richard Matsen given approach i tried and got this below result

below is the json data im using

{CategoryName: "BEVARAGES", GrossAmt: "207.00", DiscAmt: "4.00", NetAmt: "215.00"}
1
:
{Name: "FOOD", GrossAmt: "5723.00", DiscAmt: "41.00", NetAmt: "6116.00"}
2
::
{Name: "BEVARAGES", GrossAmt: "198.00", DiscAmt: "18.00", NetAmt: "192.00"}
3
:
{Name: "FOOD", GrossAmt: "6720.00", DiscAmt: "117.00", NetAmt: "7062.00"}
4
:

here zero has been added in front of the data and when i m totaling the values displaying it the totaling of the whole is also getting wrong

you can use [**lodash groupBy**](https://lodash.com/docs/4.17.4#groupBy) to achieve this — Aravind, Dec 29 '17 at 09:05

federico scamuzzi · Answer 1 · 2017-12-29T09:19:57.737

1

I know that Sandip and Aravind gives you the answer (correct for sure) .. but just to let you know. .. there's another lib that can help you with this things .. very similar to lodash .. but very usefull for some method lodash doesn't has and for .NET developers .. it is :

Linq.ts
https://github.com/kutyel/linq.ts

or

  Linqjs

https://linqjs.codeplex.com/

Maybe give a try .. Hope it helps you!!

so somehitng like>

this.serv.getId(this.table).subscribe(result=>{
      this.Total = result && result.Table && result.Table.length ? new List<YOURTYPE>(result.Table).GroupBy(xx=> xx.amt).ToArray() : [];


    },error=>{

      console.log(error)})

  }

edited Dec 29 '17 at 09:19

answered Dec 29 '17 at 09:15

federico scamuzzi

3,708
1
17
24

why 0 at the end of the statement ? – Madpop Dec 29 '17 at 09:18
sorry .. made a mistake :-) .. i mean a ? : operators to check your data back from API are full – federico scamuzzi Dec 29 '17 at 09:20

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

If you prefer pure javascript rather than importing a library, Array.reduce() will group the data.

Set up a private groupBy method on your class,

private groupBy(arr) {
  const grouped = arr.reduce( (grouping, item) => {
    grouping[item.CName] = (grouping[item.CName] || 0) + item.Amt;
    return grouping;
  }, {} );
  return Object.keys(grouped)
    .map(key => { return {CName: key, Amt: grouped[key]}; });
}

and use it like so

 this.resultData = this.groupBy(result.Table);

A runnable version:

const data = [
  { CName: "a", Amt: 1 },
  { CName: "b", Amt: 2 },
  { CName: "c", Amt: 3 },
  { CName: "a", Amt: 4 },
  { CName: "b", Amt: 5 },
]

const groupBy = (arr) => {
  const grouped = arr.reduce( (grouping, item) => {
    grouping[item.CName] = (grouping[item.CName] || 0) + item.Amt;
    return grouping;
  }, {} );
  return Object.keys(grouped)
    .map(key => { return {CName: key, Amt: grouped[key]}; });
}

const summed = groupBy(data)

console.log(summed)

Summing strings

To handle the situation where amounts are string properties, we can coerce the string value into a number by adding a + in front of it (Ref How to add two strings as if they were numbers).

To make it tidy, we should also format the summed amount, using .toFixed(2) (Ref Number.prototype.toFixed()

const data = [
  {Name: "BEVARAGES", GrossAmt: "207.00", DiscAmt: "4.00", NetAmt: "215.00"},
  {Name: "FOOD", GrossAmt: "5723.00", DiscAmt: "41.00", NetAmt: "6116.00"},
  {Name: "BEVARAGES", GrossAmt: "198.00", DiscAmt: "18.00", NetAmt: "192.00"},
  {Name: "FOOD", GrossAmt: "6720.00", DiscAmt: "117.00", NetAmt: "7062.00"}
]

const groupBy = (arr) => {
  const grouped = arr.reduce( (grouping, item) => {
    grouping[item.Name] = (grouping[item.Name] || 0) + +item.GrossAmt;
    return grouping;
  }, {} );
  return Object.keys(grouped)
    .map(key => { return {Name: key, GrossAmt: grouped[key].toFixed(2)}; });
}

const summed = groupBy(data)

console.log(summed)

Summing multiple values

Handling sums of more than one property is just a matter of creating a more complex accumulator.

const data = [
  {Name: "BEVARAGES", GrossAmt: "207.00", DiscAmt: "4.00", NetAmt: "215.00"},
  {Name: "FOOD", GrossAmt: "5723.00", DiscAmt: "41.00", NetAmt: "6116.00"},
  {Name: "BEVARAGES", GrossAmt: "198.00", DiscAmt: "18.00", NetAmt: "192.00"},
  {Name: "FOOD", GrossAmt: "6720.00", DiscAmt: "117.00", NetAmt: "7062.00"}
]

const groupBy = (arr) => {
  const grouped = arr.reduce( (grouping, item) => {
    grouping[item.Name] = (grouping[item.Name] || [0, 0, 0]) // initialize
    grouping[item.Name][0] += +item.GrossAmt;
    grouping[item.Name][1] += +item.DiscAmt;
    grouping[item.Name][2] += +item.NetAmt;
    return grouping;
  }, {} );
  return Object.keys(grouped)
    .map(key => { return {
      Name: key, 
      GrossAmt: grouped[key][0].toFixed(2),
      DiscAmt: grouped[key][1].toFixed(2),
      NetAmt: grouped[key][2].toFixed(2)
    }; });
}

const summed = groupBy(data)

console.log(summed)

Worked like a charm @Richard would u help me out with 2 issues with this approach.. & what if i have more fields which deal with amount like amnt1,amnt2,amnt3 etc — Madpop, Dec 29 '17 at 12:39

how to filter the response data & show the distinct values using angular 2/4

2 Answers2

Summing strings

Summing multiple values