Typescript interface from complex response from REST API

Question

I struggling how to handle response from VSTS API in typescript.

Is there a way to handle this interface?

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

In my code i try to loop out 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>

Any one got a brilliant idea how to solve this?

item.fields['name.with.dots']

Jota.Toledo
– Jota.Toledo

2017-09-01 13:03:35 +00:00
Commented Sep 1, 2017 at 13:03 — Jota.Toledo
– Jota.Toledo, Commented Sep 1, 2017 at 13:03

elzoy · Accepted Answer · 2017-09-01 13:02:59Z

3

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

works?

answered Sep 1, 2017 at 13:02

elzoy

5,46513 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JB Nizet · Accepted Answer · 2017-09-01 13:03:34Z

1

First, you can't use ngFor on an object.

Second, if workItems is of type Fields, you don't need any loop to display one of its attributes. All you need, just like in JavaScript or TypeScript, is

workItems['System.AreaPath']

answered Sep 1, 2017 at 13:03

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

3 Comments

Jota.Toledo Over a year ago

the ngFor section that you mention is commented

JB Nizet Over a year ago

@Jota.Toledo no, it's not. I quote: "workItems === Fields" [...] <tr *ngFor="let workitem of workItems">"

Jota.Toledo Over a year ago

You are right, but still is not clear what data type is workItems. I guess op should update his question.

MrWeiland · Accepted Answer · 2017-09-01 19:24:52Z

Thanks to @elzoy and @JB Nizet it was that ['System.AreaPath'] i needed when properties on interface is "complex". I really missing some decorators in typescript like c# [JsonProperty] like. But this works great.

MANY thanks - was hours wasted before you helped me. :)

      <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[];

}

Collectives™ on Stack Overflow

Typescript interface from complex response from REST API

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related