Creating a Typescript interface for a sophisticated response fetched from a REST API

Question

Creating a Typescript interface for a sophisticated response fetched from a REST API

I'm currently struggling with how to manage the response from VSTS API in typescript.

Is there a way to handle this interface effectively?

export interface Fields {
'System.AreaPath': any;

'System.TeamProject': string;
'System.IterationPath': string;
'System.WorkItemType': string;
'System.State': string;
'System.Reason': string;
'System.AssignedTo': string;
'System.CreatedDate': Date;
'System.CreatedBy': string;
'System.ChangedDate': Date;
'System.ChangedBy': string;
'System.Title': string;
'Microsoft.VSTS.Feedback.ApplicationType': string;
'System.Description': string;
'System.History': string;
'Microsoft.VSTS.Feedback.ApplicationStartInformation': string;
'Microsoft.VSTS.Feedback.ApplicationLaunchInstructions': string;
}

Within my code, I am attempting to iterate through the Fields (workItems === Fields)


<tbody>
        <tr *ngFor="let workitem of workItems">
          <!-- *ngFor="let field of workitems.fields" -->
          <td>{{workitem.fields.System.AreaPath}} << THIS IS NOT ALLOWED</td>
        </tr>

      </tbody>

Does anyone have a brilliant idea on how to solve this issue?

angular typescript

Answer 1

Answer №1

{{ workitem.fields['System.AreaPath'] }}

Is this functionality functional?

Answer 2

{{ workitem.fields['System.AreaPath'] }}

Is this functionality functional?

Answer 3

Answer №2

Initially, it is not feasible to employ ngFor on an object.

Furthermore, assuming workItems belongs to the Fields category, there is no requirement for a loop in order to exhibit one of its characteristics. The only necessity, identical to JavaScript or TypeScript, would be

workItems['System.AreaPath']

Answer 4

Initially, it is not feasible to employ ngFor on an object.

Furthermore, assuming workItems belongs to the Fields category, there is no requirement for a loop in order to exhibit one of its characteristics. The only necessity, identical to JavaScript or TypeScript, would be

workItems['System.AreaPath']

Answer 5

Answer №3

Big shoutout to @elzoy and @JB Nizet for helping me figure out that ['System.AreaPath'] is the key I needed when dealing with complex properties on interfaces. Wish TypeScript had some decorators like [JsonProperty] in C#, but this solution works really well.

Thank you so much - I was struggling for hours before your assistance came through. :)


<tbody>
<tr *ngFor="let workitem of workItems">

<td>{{workitem.fields['System.AreaPath']}}</td>
</tr>
</tbody>


export interface Fields {

'System.AreaPath': string;

'System.TeamProject': string;
'System.IterationPath': string;
'System.WorkItemType': string;
'System.State': string;
'System.Reason': string;
'System.AssignedTo': string;
'System.CreatedDate': Date;
'System.CreatedBy': string;
'System.ChangedDate': Date;
'System.ChangedBy': string;
'System.Title': string;
'Microsoft.VSTS.Feedback.ApplicationType': string;
'System.Description': string;
'System.History': string;
'Microsoft.VSTS.Feedback.ApplicationStartInformation': string;
'Microsoft.VSTS.Feedback.ApplicationLaunchInstructions': string;
}

export interface WorkItemFullInformation {
id: number;
rev: number;
fields: Fields;
url: string;

}

export interface FetchWorkItemRootObject {
count: number;
value: WorkItemFullInformation[];

}

Answer 6

Big shoutout to @elzoy and @JB Nizet for helping me figure out that ['System.AreaPath'] is the key I needed when dealing with complex properties on interfaces. Wish TypeScript had some decorators like [JsonProperty] in C#, but this solution works really well.

Thank you so much - I was struggling for hours before your assistance came through. :)


<tbody>
<tr *ngFor="let workitem of workItems">

<td>{{workitem.fields['System.AreaPath']}}</td>
</tr>
</tbody>


export interface Fields {

'System.AreaPath': string;

'System.TeamProject': string;
'System.IterationPath': string;
'System.WorkItemType': string;
'System.State': string;
'System.Reason': string;
'System.AssignedTo': string;
'System.CreatedDate': Date;
'System.CreatedBy': string;
'System.ChangedDate': Date;
'System.ChangedBy': string;
'System.Title': string;
'Microsoft.VSTS.Feedback.ApplicationType': string;
'System.Description': string;
'System.History': string;
'Microsoft.VSTS.Feedback.ApplicationStartInformation': string;
'Microsoft.VSTS.Feedback.ApplicationLaunchInstructions': string;
}

export interface WorkItemFullInformation {
id: number;
rev: number;
fields: Fields;
url: string;

}

export interface FetchWorkItemRootObject {
count: number;
value: WorkItemFullInformation[];

}

Creating a Typescript interface for a sophisticated response fetched from a REST API

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to store a logged-in user's email in a React

Having trouble manipulating text or values of angular elements with Selenium and Python

Error compiling SCSS in Angular 6 due to a util.js issue

How can we optimize component loading in react-virtualized using asynchronous methods?

How can I add multiple filters to a Kendo Grid?

The "data path" should not include any extra elements or properties, such as allowed CommonJS dependencies

Variations in comparing tuple types in TypeScript

Pause until the user selects either the confirm or deny option before proceeding with the next action

Best approach for managing Angular dependencies: Is it acceptable to link to a TypeScript file other than its corresponding component.ts in a component.html file?

Angular mobile navbar experiencing collapse issue

Adding custom CSS and JavaScript to an Angular 4 project can be done by including the necessary

Unable to locate the "lint" target for the project selected OR The data path "" must contain the necessary property 'lintFilePatterns'

What causes the website to malfunction when I refresh the page?

Generate multiple instances of an HTML element by using ngFor and referencing an object property

What steps can I take to ensure that the elements are in the same row instead of being displayed in three separate rows?

When comparing the values of two arrays with undefined property values

Having issues with Angular Material, specifically with mat-list-item and routerLinkActive not functioning as expected

Creating numerous bar graphs for each specific date

Was not able to capture the reaction from the Angular file upload

Determine the generic parameter of the output type by analyzing the resolved value of a data type within the function