Hello I want to display data in table in that table there are all input field with reactive form so

Here is output coming from response

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"
          }
       ]
    }]

so currently on my front end side it displaying 2 rows but I want to display 1 row for example

Expected Output

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

Actual Output

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

so in items there can be multiple object look at the response in response the items array stores two objects so first object display empid, stuId, date, month and year so I want to bind the data show in the above table.

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

I tried with grouping keys but that's not working and only work with single key but In my case there is multiple keys

My code but not working

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

Here is Stackblitz link you can check

CodePudding user response：

Hi @DeveloperLion it's easy I'm posting my answer if you have an doubts then you can comment So I'm giving you the example but you need to do code.

In you get API inside block make a object outside the foreach loop after below start the loop look like below code

For Example

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' ? date : obj.jan,
      obj.feb = ele.month == 'Feb' ? date : obj.feb,
      obj.mar = ele.month == 'Mar' ? date : obj.mar,
      obj.apr = ele.month == 'Apr' ? date : obj.apr,
      obj.may = ele.month == 'May' ? date : obj.may,
      obj.jun = ele.month == 'Jun' ? date : obj.jun,
      obj.jul = ele.month == 'Jul' ? date : obj.jul,
      obj.aug = ele.month == 'Aug' ? date : obj.aug,
      obj.sep = ele.month == 'Sep' ? date : obj.sep,
      obj.oct = ele.month == 'Oct' ? date : obj.oct,
      obj.nov = ele.month == 'Nov' ? date : obj.nov,
      obj.dec = ele.month == 'Dec' ? date : obj.dec
   });
   rows.push(this.fb.group({ empName: element.empId, stuName: element.stuId, ...obj })
});

Now your table look like your expected output