I have received the following JSON response:

Based on this JSON response, I am creating dynamic tabs and within each tab, I want to push a formArray based on specific conditions mentioned below.

**In the response below,

 const myObj = [
          {
            'TabName': 'Test1',
            'otherDetails': [
              {
                'processTechType': 'Continuous'
              },
              {
                'processTechType': 'Batch',
              },
            ]
          },
          {
            'TabName': 'Test2',
            'otherDetails': [
              {
                'processTechType': 'Batch'
              }
            ]
          }
        ];

For example -** The tab names Test1 and Test2 are dynamically displayed as tabs. In Test1 Tab, both forms named Continuous and Batch should be pushed. This is because in Test1 Tab, the processTechType array includes both Continuous and Batch types. Therefore, both forms will be shown in the Test1 Tab.

Example 2 -- In the Test2 Tab, only the Batch form should be pushed. This is because in the Test2 Tab, the otherDetails object contains processTechType batch. Therefore, only the Batch form will be shown in the Test2 Tab.

This means that it will check the tab name and otherDetails key from the response and display forms based on the processTechType array on specific tabs only.

I have the code below. However, it currently pushes both forms into all tabs instead of specific tabs. For example - The current code displays the Continuous formArray once and the Batch formArray twice in both Test1 and Test2 tabs.

Expected output -

In the Test1 Tab, one Continuous form and one Batch form will be pushed.

In the Test2 Tab, only the Batch form will be displayed.

Can anyone please help me adjust my code to achieve the expected output.

getMakeLineData() {
    
    var otherDetails = myObj.filter(m => m.otherDetails).map(m => m.otherDetails);
    this.makeLineData = myObj;
    if (otherDetails) {
      otherDetails.forEach(element => {       
        for (var i of element) {
          if (i.processTechType === 'Continuous') {
            this.addQuantity();
          }
          else if (i.processTechType === 'Batch')  {
            this.addBatch();
          } 
        }
      });      
    } 
}

createContinuousForm() {
    return this.fb.group({
      designProcess: ['', [Validators.required]]
    });
  }
  createBatchForm() {
    return this.fb.group({
      avgBCT: ['', [Validators.required]]
    });
  } 
  continuousType(): FormArray {
    return this.dataCollectionForm.get("continuousType") as FormArray;
  }

  batchType(): FormArray {
    return this.dataCollectionForm.get("batchType") as FormArray;
  }

  addQuantity() {
    this.continuousType().push(this.createContinuousForm());

  }
  addBatch() {
    this.batchType().push(this.createBatchForm());
  }

HTML form template

<div class="tabGroupDiv row">
    <div class="lossLinesDiv">     
      <mat-tab-group class="lossMatGrpCls" mat-align-tabs="left">
        <mat-tab *ngFor="let lineData of makeLineData">
          <ng-template mat-tab-label>
                <button class="validatorTabBgClr">{{lineData.makeLineName}}</button>
          </ng-template>
          <form [formGroup]="dataCollectionForm" (ngSubmit)="onSubmit()">
            <!-- <--continuous Form start here -->  
            <div class="admin-console-main-wrapper" formArrayName="continuousType">
              <div class="content-wrapper" *ngFor="let lineItem of continuousType().controls; let i=index"
                [formGroupName]="i">
              
                <div class="row list-wrapper">
                  <div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
                    <h5 class="topbar-items-text">Design Process Capacity (Tonnes)</h5>
                    <mat-form-field appearance="outline">
                      <input matInput type="text" class="line-fte-input smed-input" placeholder="Design Process Capacity"
                        formControlName="designProcess">
                    </mat-form-field>
                    <mat-error *ngIf="lineItem?.controls?.designProcess?.hasError('required')">
                      Field is required
                    </mat-error>
                  </div>
                </div>              
              </div>
            </div>  
            <!-- <--continuous Form end here -->
  
            <!-- <--Batch Form start here -->
            <div class="admin-console-main-wrapper" formArrayName="batchType">
              <div class="content-wrapper" *ngFor="let lineBatchItem of batchType().controls; let i=index"
                [formGroupName]="i">               
  
                <div class="row list-wrapper">
                  <div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
                    <h5 class="topbar-items-text">Average BCT (mins)</h5>
                    <mat-form-field appearance="outline">
                      <input matInput type="text" class="line-fte-input smed-input" placeholder="Average BCT"
                        formControlName="avgBCT">
                    </mat-form-field>
                  </div>                 
                </div>
              </div>
            </div>  
            <!-- <--Batch Form ends here -->
          </form>
        </mat-tab>
      </mat-tab-group>
    </div>
  </div>