如何使用数组对象中的 2 个键对数据进行分组

Question

你好，我想在 table 中显示数据，因为 table 所有输入字段都具有反应形式，所以

这是响应的输出

var arr = [{
        "empId": "111222",
        "stuId": "555666",
        "items": [
          {
            "empId": "111222",
            "stuId": "555666",
            "date": "2021-12-12T00:00:00Z",
            "month": "Dec",
            "year": "2021",
            "id": "1"
          },
          {
            "empId": "111222",
            "stuId": "555666",
            "date": "2021-02-02T00:00:00Z",
            "month": "Feb",
            "year": "2021",
            "id": "2"
          }
       ]
    }]

所以目前在我的前端显示 2 行，但我想显示 1 行，例如

预期输出

---------------------------------------------------------------------------------------------
| empId  / stuId  | jan | feb | mar | apr | may | jun | jul | aug | sep | oct | nov | dec   |
---------------------------------------------------------------------------------------------
| 111222 / 555666 |     | 02  |     |     |     |     |     |     |     |     |     |  12   |
---------------------------------------------------------------------------------------------

实际输出

---------------------------------------------------------------------------------------------
| empId  / stuId  | jan | feb | mar | apr | may | jun | jul | aug | sep | oct | nov | dec   |
---------------------------------------------------------------------------------------------
| 111222 / 555666 |     |     |     |     |     |     |     |     |     |     |     |  12   |
---------------------------------------------------------------------------------------------
| 111222 / 555666 |     |  02 |     |     |     |     |     |     |     |     |     |       |
---------------------------------------------------------------------------------------------

所以项目中可以有多个对象查看响应项目数组存储两个对象所以第一个对象显示 empid、stuId、日期、月份和年份所以我想绑定数据如上所示table.

Note It can be multiple object in items if empid and stuid are same then store in that object.

我尝试使用分组键，但这不起作用，只能使用单个键，但在我的情况下有多个键

我的代码不工作

var helper = {};
var result = arr.reduce(function(r, o) {
  var key = o.empId + '-' + o.stuId;
  
  if(!helper[key]) {
    helper[key] = Object.assign({}, o); // create a copy of o
    r.push(helper[key]);
  } else {
    helper[key].month += o.month;
    helper[key].year += o.year;
    helper[key].date += o.date;
  }

  return r;
}, []);

console.log(result);

这是 Stackblitz link 你可以查看

Answer 1

你好@DeveloperLion 很简单，如果你有疑问，我会发布我的答案，然后你可以发表评论所以我给你举了例子，但你需要编写代码。

在你得到 API 内部块后，在 foreach 循环之外创建一个对象，然后开始循环，如下代码所示

例如

let rows = <FormArray>this.formGroupName.controls.ArrayName;
rows.clear();

arr.foreach(element => {

   var obj = { empName: element.empId, stuName: element.stuId, jan: '', feb: '', mar: '', apr: '', may: '', jun: '', jul: '', aug: '', sep: '', oct: '', nov: '', dec: '' } // inside object key name same as formcontrolName 

   arr[0]['items'].forEach((ele, ind) => {
      obj.jan = ele.month == 'Jan' ? ele.date : obj.jan,
      obj.feb = ele.month == 'Feb' ? ele.date : obj.feb,
      obj.mar = ele.month == 'Mar' ? ele.date : obj.mar,
      obj.apr = ele.month == 'Apr' ? ele.date : obj.apr,
      obj.may = ele.month == 'May' ? ele.date : obj.may,
      obj.jun = ele.month == 'Jun' ? ele.date : obj.jun,
      obj.jul = ele.month == 'Jul' ? ele.date : obj.jul,
      obj.aug = ele.month == 'Aug' ? ele.date : obj.aug,
      obj.sep = ele.month == 'Sep' ? ele.date : obj.sep,
      obj.oct = ele.month == 'Oct' ? ele.date : obj.oct,
      obj.nov = ele.month == 'Nov' ? ele.date : obj.nov,
      obj.dec = ele.month == 'Dec' ? ele.date : obj.dec
   });
   rows.push(this.fb.group({ empName: element.empId, stuName: element.stuId, ...obj })
});

现在你的table看起来像你预期的输出

如何使用数组对象中的 2 个键对数据进行分组

how to group data with 2 keys from array object

javascript

arrays

object

angular-reactive-forms

angular6