如何在 TypeScript 中的對象數組中將數據從一個對象數組獲取到另一個對象數組中

Question

我在返回響應的組件中有一個獲取請求

  getPaymentIntents():Observable<Payment>>{
    const url: string = 'https://store.com//payments';

    return this.http.get<Payment>>
    (url);
  }

響應數據看起來像這樣（“付款”類型）

[
    {
        "id": "pi_3K4B432423dqM1gTYncsL",
        "amount": 2000,
        "amount_capturable": 0,
        "amount_received": 0,
        "application": null,
        "canceled_at": null,
        "cancellation_reason": null,
        "created": 1638911287,
        "currency": "usd",
        "customer": "cus_KjDBkdsaHIT6AN"
},
    {
        "id": "pi_3K4BW7EE9YQoA1qM1gTYncsL",
        "amount": 1000,
        "amount_capturable": 0,
        "amount_received": 0,
        "application": null,
        "canceled_at": null,
        "cancellation_reason": null,
        "created": 1638913687,
        "currency": "usd",
        "customer": "cus_KjDBkxEVHIT6AN"
}
]

我希望這些數據位於“材料表” https://material.angular.io/components/table/overview

但我只希望它顯示數據的一個子集。 （將來我也想將另一個響應的數據合並到表中）

我想作為數據源傳遞給表的dataSource是這個

export interface OrderToProcess{
  Id: string,
  Amount: number,
  Currency: string
}

我如何 go 關於將一種類型轉換為另一種類型，我試過filter() map() object.entries()並且我確定我沒有正確使用它們，但似乎沒有一個能滿足我的要求。

謝謝你的幫助！

Answer 1

您確實在尋找map 。 假設我們有以下 function 來模擬您的 HTTP 調用：

  // Imports needed for rest of example code
  import { map, Observable, of } from 'rxjs';

  /**
   * getPaymentIntents mocks HTTP call with static data
   */
  getPaymentIntents(): Observable<any> {
    return of([
      {
        id: 'pi_3K4B432423dqM1gTYncsL',
        amount: 2000,
        amount_capturable: 0,
        amount_received: 0,
        application: null,
        canceled_at: null,
        cancellation_reason: null,
        created: 1638911287,
        currency: 'usd',
        customer: 'cus_KjDBkdsaHIT6AN',
      },
      {
        id: 'pi_3K4BW7EE9YQoA1qM1gTYncsL',
        amount: 1000,
        amount_capturable: 0,
        amount_received: 0,
        application: null,
        canceled_at: null,
        cancellation_reason: null,
        created: 1638913687,
        currency: 'usd',
        customer: 'cus_KjDBkxEVHIT6AN',
      },
    ]);
  }
}

您可以 map 使用以下（或類似的東西）在您的組件中輸入您的類型：

  // Table columns
  displayedColumns: string[] = ['id', 'amount', 'currency'];
  // Our table data source
  dataSource$: Observable<OrderToProcess[]>;
  constructor() {
    this.dataSource$ = this.getPaymentIntents().pipe(
      // Map data to an array of type OrderToProcess.
      map((data) => {
        let transformedData: OrderToProcess[] = [];
        for (let i = 0; i < data.length; i++) {
          transformedData.push({
            Id: data[i].id,
            Amount: data[i].amount,
            Currency: data[i].currency,
          });
        }
        return transformedData;
      })
    );
  }

並將它們顯示在您的表格中：

<table mat-table [dataSource]="dataSource$" class="mat-elevation-z8">
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef>ID</th>
    <td mat-cell *matCellDef="let element">{{element.Id}}</td>
  </ng-container>

  <ng-container matColumnDef="amount">
    <th mat-header-cell *matHeaderCellDef>Amount</th>
    <td mat-cell *matCellDef="let element">{{element.Amount}}</td>
  </ng-container>

  <ng-container matColumnDef="currency">
    <th mat-header-cell *matHeaderCellDef>Currency</th>
    <td mat-cell *matCellDef="let element">{{element.Currency}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

如果您將其粘貼到您的項目中，我相信它應該可以幫助您完成您的目標。

Answer 2

我想你只需要這樣做：

TS

...
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
...

// Declare your interface before declaring your Class, right after your imports
export interface OrderToProcess{
  Id: string,
  Amount: number,
  Currency: string
}

...
// In your class attributes declaration
dataSource$: Observable<OrderToProcess[]>;
...

constructor() {

    this.dataSource$ = this.getPaymentIntents()
    .pipe(
      map( (data:Payment[]) => {

        let ordersToProcess: OrderToProcess[] = data.map( payment => 
           {
              Id: payment.id,
              Amount: payment.amount,
              Currency: payment.currency
           }
        );

        return ordersToProcess;

      }) //end map rxjs
    ); //end pipe rxjs

}

然后，在您的 HTML 中，只需像往常一樣將可觀察到的 dataSource$ 傳遞給您的材料表（[dataSource]="dataSource$"）

注意：我不完全確定，但也許您甚至可以通過執行以下操作進一步簡化它：

 this.dataSource$ = this.getPaymentIntents()
    .pipe(
      map( (data:Payment[]) => data.map( payment => 
           {
              Id: payment.id,
              Amount: payment.amount,
              Currency: payment.currency
           }
    )));