使用 Angular 4 Pipes 或 Rxjs 运算符对对象数组（json）中的属性值进行分组/求和

Question

我的 http 调用的响应是一组公司对象，如下所示：

response = [{
    "name": "CompanyName1",
    "registrations": [
      {
        "country": "en",
        "register": "registerType1",
        "amount": 2
      },
      {
        "country": "wa",
        "register": "registerType2",
        "amount": 1
      },{
        "country": "en",
        "register": "registerType1",
        "amount": 3
      },
       {
        "country": "sc",
        "register": "registerType3",
        "amount": 2
      },
      {
        "country": "wa",
        "register": "registerType3",
        "amount": 2
      }
    ]
  },
  {
    "name": "CompanyName2",
    "registrations": [
      {
        "country": "wa",
        "register": "registerType1",
        "amount": 3
      },
      {
        "country": "sc",
        "register": "registerType3",
        "amount": 1
      }
    ]]

如果 registerType1 ||，我需要按注册和国家/地区将公司的注册分组/汇总到一个新的 propertyName (registerType_12) registerType2 否则只保留属性名称 registerTypeN。那是 companyName1 我需要得到这样的结果：

CompanyName1: [{country:en, registerType_12, amount:5},
              {country:wa, registerTyoe_12, amount:1,
              {country:sc, registerType3, amount:4}
              }]

Answer 1

我做了一个 Plunkr 来演示如何做到这一点：https://plnkr.co/edit/uO48fEVJGy2nwm587PO8?p=preview

这里有一个解释

我将您的数据保存在一个变量中：

const { Observable } = Rx;

// FAKE DATA FROM BACKEND
const data = [
  {
    "name": "CompanyName1",
    "registrations": [
      {
        "country": "en",
        "register": "registerType1",
        "amount": 2
      },
      ...
    ]
  },
  {
    "name": "CompanyName2",
    "registrations": [
      {
        "country": "wa",
        "register": "registerType1",
        "amount": 3
      },
      ...
    ]
}];

我为 Response 和 Http.get 方法做了一个模拟，所以最后我们得到了一些看起来像 Angular 的代码：
（这些与您的问题没有直接关系）

// MOCK RESPONSE OBJECT
const response = () => {
  const r = {
    body: null
  };

  r.json = () => JSON.parse(r.body);

  return r;
};

// MOCK HTTP METHOD
const http = {
  get: (url) => {
    const res = response();
    res.body = JSON.stringify(data);

    return Observable.of(res).delay(1000)
  }
};

---

以下是您可以用干净的方式解决问题的方法：

http
  .get('some-url')
  .map(res => res.json())
  .map(groupByCompanyNameAndRegistration)
  .do(data => console.log(data))
  .subscribe();

---

显然，groupByCompanyNameAndRegistration 尚未制作。 但是我们有一个干净的Observable 链，很容易理解发生了什么。

代码的逻辑部分：

const flattenObj = (obj) =>
  Object.keys(obj).map(key => obj[key]);

const groupByCompanyNameAndRegistration = (data) => {
  return data.reduce((accComp, company) => {
    if (!accComp[company.name]) {
      accComp[company.name] = {};
    }

    const compObj = company.registrations.reduce((accReg, reg) => {
      if (!accReg[reg.country]) {
        accReg[reg.country] = {
          country: reg.country,
          amount: 0
        };
      }

      accReg[reg.country].amount += reg.amount;

      return accReg;
    }, {});

    accComp[company.name] = flattenObj(compObj);

    return accComp;
  }, {});
};

最后，控制台输出：

{
  "CompanyName1": [
    {
      "country": "en",
      "amount": 5
    },
    {
      "country": "wa",
      "amount": 3
    },
    {
      "country": "sc",
      "amount": 2
    }
  ],
  "CompanyName2": [
    {
      "country": "wa",
      "amount": 3
    },
    {
      "country": "sc",
      "amount": 1
    }
  ]
}

Answer 2

您不需要 typescript 或 rxjs。它可以用纯javascript来实现。

JSBin 链接：https://jsbin.com/yujocofesu/edit?js,console

response.reduce((finalObj, obj)=>{
     finalObj[obj.name] = 
         obj.registrations
             .map(reg => Object.assign(reg,
                  {register: ( 
                     reg.register ==='registerType1'||
                     reg.register==='registerType2') ?
                     'registerType_12': reg.register 
                   })
              )
              .reduce(mergeSimilar, []);
     return finalObj;
   },{});


function mergeSimilar(newList, item){
  let idx = newList.findIndex( 
      i=> i.country === item.country && i.register === item.register);
  if(idx>-1){
    newList[idx].amount += item.amount;
  }else{
    newList.push(item)
  }
  return newList;
}

这给出了响应

{
  CompanyName1: [{
    amount: 5,
    country: "en",
    register: "registerType_12"
  }, {
    amount: 1,
    country: "wa",
    register: "registerType_12"
  }, {
    amount: 2,
    country: "sc",
    register: "registerType3"
  }, {
    amount: 2,
    country: "wa",
    register: "registerType3"
  }],
  CompanyName2: [{
    amount: 3,
    country: "wa",
    register: "registerType_12"
  }, {
    amount: 1,
    country: "sc",
    register: "registerType3"
  }]
}