storing input value and response data as one object in angular

Issue

I am trying to store two properties as input value in my JSON, but other properties must be stored as the data for specific item that i get from API. how can i achieve that?

My stackblitz

.ts

ngOnInit() {
    this.http
      .get<any>('https://*************')
      .subscribe((data) => {
        this.carPartCategories = data;
        console.log(this.carPartCategories);
        this.carPartStatusCtrl = this.createFormArray(this.carPartCategories);
        this.updateEstimation = this.fb.group({
          carPartStatus: this.carPartStatusCtrl,
        });
      });
  }

 get data(): any {
    let value = this.updateEstimation.value;
    return (this.finalData = {
      carPartSubCategories: value.carPartStatus?.map((i) => ({
        price: i.price,
        status: i.status,
        account_number: this.carPartCategories.account_number, //returns undefiened
        bank_name: this.carPartCategories.bank_name, //returns undefiened
      })),
    });
  }

price and status are the values from input, but other properties i want to store as the data i got from API.

.html

<form [formGroup]="updateEstimation" *ngIf="updateEstimation">
  {{updateEstimation.value | json}}
  <ng-container formArrayName="carPartStatus">
    <ng-container *ngFor="let i of carPartCategories; let j = index">
      <ng-container [formGroupName]="j">
        <div class="content-desc mt-4 mb-5">
          <div class="row mt-4 parts-row align-items-center">
            <div class="col-lg-2">
              <span class="p-2 nusx">
                {{ i.bank_name }}
              </span>
            </div>
            <div class="col-lg-3">
              <span class="p-2 nusx">
                {{ i.iban }}
              </span>
            </div>
            <div class="col-lg-2">
              <span class="p-2 nusx">
                <mat-form-field appearance="fill">
                  <mat-label>choose</mat-label>
                  <mat-select formControlName="status">
                    <mat-option> test </mat-option>
                  </mat-select>
                </mat-form-field>
              </span>
            </div>
            <div class="col-lg-2">
              <span class="p-2 nusx"> X{{ i.id }} </span>
            </div>
            <div class="col-lg-2 price">
              <input
                type="text"
                placeholder="price"
                class="form-control"
                formControlName="price"
              />
            </div>
          </div>
        </div>
        <div class="comment mt-4 mb-5" *ngIf="i.uid">
          <p class="mtav">comment</p>
          <p class="nusx">{{ i.uid }}</p>
        </div>
        <hr />
      </ng-container>
    </ng-container>
  </ng-container>

(*) the http.gets return an array in the way

[{"id":1234,"uid":"....","account_number":"....","iban":"...",
  "bank_name":"PGMS (GLASGOW)","routing_number":"....",
  "swift_bic":"...."},
  {"id":5678,"uid":".....","account_number":"....","iban":"....",
  "bank_name":"THE ROYAL BANK OF SCOTLAND","routing_number":"....",
  "swift_bic":"..."}]

Solution

this.carPartCategoriesis an array, so your map should be like

this.finalData=this.updateEstimation.value.map((x:any,index)=>({
        price: x.price,
        status: x.status,
        account_number: this.carPartCategories[index].account_number, 
        bank_name: this.carPartCategories[index].bank_name, 
}))

See how map allow a "second argument", the index of the element you're iterating that you can use to know what index is in the array carPartCategories.

Futhermore, I like more iterate over the carPartStatusCtrl.controls, not over the array of cartPartCategories and use cartPartCategories[j].iban, cartPartCategories[j].id,...

I suggest also not call to your "variable" i, i (or j or k) is ussually use for indexes

Answered By - Eliseo