storing input value and response data as one object in angular-CodePudding

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 >
          <div >
            <div >
              <span >
                {{ i.bank_name }}
              </span>
            </div>
            <div >
              <span >
                {{ i.iban }}
              </span>
            </div>
            <div >
              <span >
                <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 >
              <span > X{{ i.id }} </span>
            </div>
            <div >
              <input
                type="text"
                placeholder="price"
                
                formControlName="price"
              />
            </div>
          </div>
        </div>
        <div  *ngIf="i.uid">
          <p >comment</p>
          <p >{{ 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":"..."}]

CodePudding user response：

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