A guide on transferring data between two arrays of objects using TypeScript

Question

A guide on transferring data between two arrays of objects using TypeScript

I am working on implementing a get request within a component that retrieves a response:

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

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

The response data structure for the "Payment" type is as follows:

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

I aim to display this data in a Material Table. I only need to showcase a subset of the information and plan to incorporate another response's data into the table in the future.

The desired interface for passing data to the table as a dataSource should match the following format:


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

I have been experimenting with methods like `filter()`, `map()`, `Object.entries()` to transform one type into another but haven't achieved the desired outcome yet. Any guidance or assistance would be greatly appreciated!

javascript angular typescript

Answer 1

Answer №1

You are on the right track with your search for map. Let's assume we have a function set up to mimic an HTTP call:

  // Necessary imports for the example code
  import { map, Observable, of } from 'rxjs';

  /**
   * getPaymentIntents simulates an HTTP call using 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',
      },
    ]);
  }
}

In your component, you can map this data to your desired type as shown below (or with similar logic):

  // Define table columns
  displayedColumns: string[] = ['id', 'amount', 'currency'];
  // Data source for our table
  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;
      })
    );
  }

To display this in a table, you can use the following structure:

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

If you integrate this into your project, it should assist you in achieving your goal.

Answer 2

You are on the right track with your search for map. Let's assume we have a function set up to mimic an HTTP call:

  // Necessary imports for the example code
  import { map, Observable, of } from 'rxjs';

  /**
   * getPaymentIntents simulates an HTTP call using 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',
      },
    ]);
  }
}

In your component, you can map this data to your desired type as shown below (or with similar logic):

  // Define table columns
  displayedColumns: string[] = ['id', 'amount', 'currency'];
  // Data source for our table
  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;
      })
    );
  }

To display this in a table, you can use the following structure:

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

If you integrate this into your project, it should assist you in achieving your goal.

Answer 3

Answer №2

To tackle this issue, it appears that the solution lies in the following steps:

TS

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

// Make sure to define your interface before declaring your Class, immediately after importing necessary modules
export interface OrderToProcess{
  Id: string,
  Amount: number,
  Currency: string
}

...
// When defining class attributes
dataSource$: Observable<OrderToProcess[]>;
...

constructor() {

    // Assign the result of getPaymentIntents to dataSource$, using rxjs operator pipe and map
    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

}

Finally, in your HTML file, simply bind the dataSource$ observable to your material table like so ([dataSource]="dataSource$")

NOTE: There might be a way to simplify the code even further by trying the following approach:


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

Answer 4

To tackle this issue, it appears that the solution lies in the following steps:

TS

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

// Make sure to define your interface before declaring your Class, immediately after importing necessary modules
export interface OrderToProcess{
  Id: string,
  Amount: number,
  Currency: string
}

...
// When defining class attributes
dataSource$: Observable<OrderToProcess[]>;
...

constructor() {

    // Assign the result of getPaymentIntents to dataSource$, using rxjs operator pipe and map
    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

}

Finally, in your HTML file, simply bind the dataSource$ observable to your material table like so ([dataSource]="dataSource$")

NOTE: There might be a way to simplify the code even further by trying the following approach:


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

A guide on transferring data between two arrays of objects using TypeScript

Answer №1

Answer №2

Similar questions

As soon as I inserted the image, the text vanished into thin air

Outputting PHP variables in JavaScript is a common practice used to pass

Create a JavaScript array containing all the elements from a MySQL table

Using CSS in combination with AngularJS, you can create a dynamic growth effect for a div element that initially

Executing an SQL delete query with a button click using a JavaScript function in PHP

What is the best way to incorporate websocket functionality for message push notifications with Django Rest Framework as the server-side backend and Angular 2

Steps for adding validation when clicking outside an input in an angular form:

Having trouble seeing the output on the webpage after entering the information

Error message: Impossibile to locate module 'formik' in 'C:Live projectsNew folder (2)src\_metronicpartialsmodalscreate-app'

Retrieve the href value from a DOM element

Create a consistent number based on quantity

The function is returning an undefined value in node.js due to the boolean condition

Navigating the jQuery UI Accordion: selecting a panel via the top menu to reveal its contents while simultaneously closing any

Handling ASP.net POST requests in Angular2

Error: The type '{ children: Element[]; className: string; }' cannot be assigned to the type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Interfaces and Accessor Methods

Error messages in login form using AJAX in Rails

Encountered a Next-Auth Error: Unable to fetch data, TypeError: fetch failed within

Encountering a 404 error while accessing my meticulously crafted express server

When you invoke a function within Angular 1.5 as a fresh component emerges