如何过滤响应数据并使用角度2/4显示不同的值

Question

我从下面的web api获取动态数据是我的回复数据

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”，办公室：124}

这里我的问题是这里有名为CName的列，其中有重复多次的值，如a，b，c在这里重复2次，我想知道是否有任何可能我们可以区分/分组这些数据，包括我的意思是总计不同？

下面是我的服务代码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();
    });
  }

并通过使用订阅im从服务中消费这样

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

  }

参考@Richard Matsen给出的方法，我试过并得到以下结果

下面是使用的json数据

{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
:

这里零已添加到数据前面，当我总计显示它的值时，整体的总和也出错了

Answer 1

如果您更喜欢纯JavaScript而不是导入库，Array.reduce()将对数据进行分组。

在你的班级上设置一个私有的groupBy方法，

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

并像这样使用它

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

一个可运行的版本：

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)

---

求和字符串

要处理金额为字符串属性的情况，我们可以通过在其前面添加+将字符串值强制转换为数字（参考How to add two strings as if they were numbers）。

为了使它整洁，我们还应该使用.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)

---

总结多个值

处理多个属性的总和只是创建一个更复杂的累加器的问题。

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

我知道Sandip和Aravind会给你答案（肯定是正确的）..但只是为了让你知道。 ..还有另一个可以帮助你解决这个问题的lib ..非常类似于lodash ..但对于某些方法lodash没有和.NET开发人员非常有用..它是：

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

要么

  Linqjs

https://linqjs.codeplex.com/

也许试一试..希望它能帮到你!!

所以像>

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

  }