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

Is there another option for addressing this issue - A function that does not declare a type of 'void' or 'any' must have a return value?

Is my approach to CSV parsing correct if I am receiving the error "Unable to assign property 'processing' to undefined"?

Fixing permission issues during the installation of Angular Client on MacOS: A comprehensive guide

Show details when clicked with various elements

Validation of Date in Angular 5 (with specified minimum and maximum dates)

Using the parameter value as a property name in the return type of a function in TypeScript: a guide

Angular 7 three-dimensional model display technology

Using a function as a parameter in Typescript: Anticipated no arguments, received 1.ts

Which Angular Lifecycle event should I utilize to trigger a specific action when either two buttons are pressed or when one of the buttons undergoes a change?

The production build encountered an issue as it was anticipating 3 arguments, however, it only received

Ways to resolve the issue of 'message' property lacking an initializer in TypeScript without suppressing errors

Error: Model function not defined as a constructor in TypeScript, mongoose, and express

Creating an application using AngularJS 4 and the Express generator

What is the best way to showcase the information retrieved from my API?

Creating an array that exclusively contains numbers using anonymous object export: A step-by-step guide

Display options based on the value selected in the preceding selection

Steps for deleting an item from a list based on a specific condition in Ionic 2

NextJs 13 unveils its cutting-edge dynamic sitemap feature

Contrast: Colon vs. Not Equal Sign (Typescript)

Managing external dependencies in NX & Angular compatible libraries