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

Answer 1

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)

Answer 2

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)})

  }