Guide to building an interface for an object containing a nested array

Question

Guide to building an interface for an object containing a nested array

While working on my Angular/TypeScript project, I encountered a challenge in processing a GET request to retrieve objects from an integration account. Here is a snippet of the response data:

{
  "value": [
    {
      "properties": {
        "publicCertificate": "<publicCertificate>",
        "createdTime": "2021-03-11T19:50:03.50193Z",
        "changedTime": "2021-03-26T07:06:12.3232003Z"
      },
      "id": "/subscriptions/34adfa4f-cedf-4dc0-ba29-b6d1a69ab345/resourceGroups/testResourceGroup/providers/Microsoft.Logic/integrationAccounts/testIntegrationAccount/certificates/<integrationAccountCertificateName>",
      "name": "<integrationAccountCertificateName>",
      "type": "Microsoft.Logic/integrationAccounts/certificates"
    },
    {
      "properties": {
        "publicCertificate": "<publicCertificate>",
        "createdTime": "2021-05-27T12:45:33.455709Z",
        "changedTime": "2021-05-27T12:45:33.4564322Z"
      },
      "id": "/subscriptions/34adfa4f-cedf-4dc0-ba29-b6d1a69ab345/resourceGroups/testResourceGroup/providers/Microsoft.Logic/integrationAccounts/testIntegrationAccount/certificates/<integrationAccountCertificateName>",
      "name": "<integrationAccountCertificateName>",
      "type": "Microsoft.Logic/integrationAccounts/certificates"
    }
  ]
}

I am currently using the following interface structure:

export interface Certificate {
  value?: (ValueEntity)[] | null;
}

export interface ValueEntity {
  properties: Properties;
  id: string;
  name: string;
  type: string;
}
export interface Properties {
  publicCertificate: string;
  createdTime: string;
  changedTime: string;
}

My goal is to extract and display the publicCertificate, id, name, and type values from the response data. Is there a more streamlined way to define this interface?

EDIT

Below is the service I have implemented for fetching the certificates:

@Injectable()
export class IntegrationAccountService
{
  constructor(private httpclient: HttpClient, private api: ApiService) { }

  getCertificates(): Observable<any> {
    const httpOptions : Object = {
      headers: new HttpHeaders({
        'Authorization': 'Token'
      }),
      responseType: 'json'
    };
    return this.httpclient.get('URL', httpOptions);
  }
}

Component:

export class CertificateTableComponent {

  dataSource: MatTableDataSource<ValueEntity>;
  certificates: ValueEntity[] = [];
  columns: string[] = ['name', 'id', 'type', 'publicCertificate'];

  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static:true }) paginator: MatPaginator;

  constructor(private _integrationAccountService: IntegrationAccountService) {
  }

  ngOnInit() {

    this._integrationAccountService.getCertificates().subscribe(response => {
      this.certificates = response.data;

      this.dataSource = new MatTableDataSource(this.certificates);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;

    })

  }
}

Data table Component:

 <table mat-table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row">{{ row.name }}</td>
    </ng-container>

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
      <td mat-cell *matCellDef="let row">{{ row.id }}</td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
      <td mat-cell *matCellDef="let row">{{ row.type }}</td>
    </ng-container>

    <ng-container matColumnDef="publicCertificate">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Public Certificate</th>
      <td mat-cell *matCellDef="let row">{{ row.publicCertificate }}</td>
    </ng-container>

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

  </table>

angular typescript

Answer 1

Answer №1

Here's a helpful method that can assist you in converting your response object into the appropriate response:

retrievePropertySources(response): Array<PropertiesSource> {
    let resultList: PropertiesSource[] = [];
    resultList = response.value.map(data => {
      let res : PropertiesSource = data.properties.key.keyVault;
      res.publicCertificate = data.properties.publicCertificate;
      return res;
    });
    console.log('result ', resultList);
    return resultList;
  }

I have also created a StackBlitz for your convenience.

Enjoy coding! :)

Answer 2

Here's a helpful method that can assist you in converting your response object into the appropriate response:

retrievePropertySources(response): Array<PropertiesSource> {
    let resultList: PropertiesSource[] = [];
    resultList = response.value.map(data => {
      let res : PropertiesSource = data.properties.key.keyVault;
      res.publicCertificate = data.properties.publicCertificate;
      return res;
    });
    console.log('result ', resultList);
    return resultList;
  }

I have also created a StackBlitz for your convenience.

Enjoy coding! :)

Answer 3

Answer №2

Your sample JSON data appears to have some issues. Feel free to use this tool to rectify any errors. Once the JSON is valid, we will be able to assist you more effectively.

Additional Note:

It would be beneficial for your service if you specify the type instead of returning an 'Observable'. This will enhance auto-completion when accessing the result data in other parts of your code:

this.http.get<Response<ExtLanguage[]>>(languagesURL)

@Injectable()
export class integrationAccountService
{
  constructor(private httpclient: HttpClient, private api: ApiService) { }

  getcertificates(): Observable<Certificate> {
    const httpOptions : Object = {
      headers: new HttpHeaders({
        'Authorization': 'Token'
      }),
      responseType: 'json'
    };
    return this.httpclient.get<Certificate>('URL', httpOptions);
  }
}

Furthermore, ensure that your component deals with the resulting data correctly as there is no 'response.data' property. You may need to restructure the received data into a new format:

export interface FlatRow {
    name: string;
    id: string;
    type: string;
    publicCertificate: string;
}

export class CertificateTableComponent {

  dataSource: MatTableDataSource<ValueEntity>;
  //certificates: ValueEntity[] = [];
  data: FlatRow[] = [];
  columns: string[] = ['name', 'id', 'type', 'publicCertificate'];

  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static:true }) paginator: MatPaginator;

  constructor(private _integrationAccountService: integrationAccountService) {
  }

  ngOnInit() {

    this._integrationAccountService.getcertificates().subscribe(response => {
      //this.certificates = response.data;
      this.data = [];
      if (response.value) {
          for (let entity of response.value) {
              let row: FlatRow = {
                  name: entity.name,
                  id: entity.id,
                  type: entity.type,
                  publicCertificate: entity.properties?.publicCertificate;
              };
          }
      }

      this.dataSource = new MatTableDataSource(this.data);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;

    })

  }
}

Answer 4

Your sample JSON data appears to have some issues. Feel free to use this tool to rectify any errors. Once the JSON is valid, we will be able to assist you more effectively.

Additional Note:

It would be beneficial for your service if you specify the type instead of returning an 'Observable'. This will enhance auto-completion when accessing the result data in other parts of your code:

this.http.get<Response<ExtLanguage[]>>(languagesURL)

@Injectable()
export class integrationAccountService
{
  constructor(private httpclient: HttpClient, private api: ApiService) { }

  getcertificates(): Observable<Certificate> {
    const httpOptions : Object = {
      headers: new HttpHeaders({
        'Authorization': 'Token'
      }),
      responseType: 'json'
    };
    return this.httpclient.get<Certificate>('URL', httpOptions);
  }
}

Furthermore, ensure that your component deals with the resulting data correctly as there is no 'response.data' property. You may need to restructure the received data into a new format:

export interface FlatRow {
    name: string;
    id: string;
    type: string;
    publicCertificate: string;
}

export class CertificateTableComponent {

  dataSource: MatTableDataSource<ValueEntity>;
  //certificates: ValueEntity[] = [];
  data: FlatRow[] = [];
  columns: string[] = ['name', 'id', 'type', 'publicCertificate'];

  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static:true }) paginator: MatPaginator;

  constructor(private _integrationAccountService: integrationAccountService) {
  }

  ngOnInit() {

    this._integrationAccountService.getcertificates().subscribe(response => {
      //this.certificates = response.data;
      this.data = [];
      if (response.value) {
          for (let entity of response.value) {
              let row: FlatRow = {
                  name: entity.name,
                  id: entity.id,
                  type: entity.type,
                  publicCertificate: entity.properties?.publicCertificate;
              };
          }
      }

      this.dataSource = new MatTableDataSource(this.data);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;

    })

  }
}

Guide to building an interface for an object containing a nested array

Answer №1

Answer №2

Similar questions

Angular 2 - Issue with ngOnInit not being called upon routing to the same component multiple times

Using AngularJS with CDN: A beginner's guide

Duplicate NgRx Effects found during loading process

Different methods for organizing an array of strings based on eslint/prettier

Utilizing Angular 16 to Link Component Input with Parent Route Parameter

What is the best method to include spacing between strings in an array and then combine them into a csv-friendly format?

Issue with dynamically typed object properties in Typescript codebases

There is no overload that matches this call in Next.js/Typescript

Mapping an array based on its individual values

Exploring methods to access specific values from an array containing multiple values using Lodash in Angular 4

The switch statement and corresponding if-else loop consistently produce incorrect results

Utilizing a feature module imported from a separate Angular4 project

Linking typescript error messages with their respective compiler configurations (tsconfig.json)

Removing a row from a FormArray within a FormGroup is not the appropriate method for managing input fields within a MatTable

The concept of overloaded function types in TypeScript

Leverage functionalities from the rxjs npm package within an Angular application without the need for npm install

Angular removing every query string parameters

NestJS does not recognize TypeORM .env configuration in production build

An issue occurred while attempting to retrieve Firebase data using an HTTP GET request

Effective methods for transmitting reactive form control between child and parent components in Angular 2