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

The Angular formGroup isn't activating the radio button as expected

Using kotlinx.serialization to deserialize a JSON array into a sealed class

Prevent using keys of nullable properties as method parameters in Typescript generics

Tips for customizing the color of mat-select placeholder text?

Differences between RxJs Observable<string> and Observable<string[]>

I am struggling to grasp the issues with the RxJS v6 migration

Angular 15 experiences trouble with child components sending strings to parent components

Error in TypeScript: Typography type does not accept 'string' type as valid

Executing the routing component prior to any other tasks

Angular 6 form input value displays incorrectly after dynamically closing a tab

ng-zorro cascader lazy loading of data, the nzLoadData function returned as undefined

Error in Angular 8: Could not perform 'setAttribute' on 'Element': 'Event' is an invalid attribute label

When closing a Bootstrap modal, the modal overlay does not automatically close along with it

Availability of variables and declaration of functions

I'm encountering difficulties utilizing ternary operators in TypeScript

Setting the data type of a value in a deeply nested object path using Typescript

Issue with Switch Map in Angular 2 and RxJS

Retrieving data from notifications without having to interact with them (using Firebase Cloud Messaging and React Native)

encountering a loading issue with angular2-modal in rc1 version

What are the reasons for discouraging the use of canActivate always returning false?