Rxjs - Mapping from json to typescript interface

Question

So, as I've been exploring this new space I needed to do a Web API call. Theres a lot of confusion out there between the versions of everything. Anyhow, I found something that works, and I know "best practice" is a bit too subjective. However, what I don't know is if there is a more direct way to do this.

Here is the format of the response I'm seeking:

export interface AuditDetail {
  updatedAt: Date;
  updatedBy: string;
}

Here is the server-side model:

[DataContract]
public class PlanHistory
{
    [Key]
    public int Id { get; set; }

    [DataMember]
    [MaxLength(50)]
    public string UpdatedBy { get; set; }

    [DataMember]
    public DateTime UpdatedAt { get; set; }
}

And here is my Angular service:

getAuditDetails(planId: number, fieldName: string, fieldValue: string): Observable<AuditDetail> {
    //return of({ updatedAt: new Date(), updatedBy: "Hawchorn" }); //Tooltip displays data

    interface PlanHistory    //Created because couldn't figure out how to directly map from Json to an Audit Detail. 
    {
      UpdatedAt: Date;
      UpdatedBy: string;
    }

    this.log("Retrieving Audit Details");
    return this.http
      .get<PlanHistory>(this.webApiUrl +
        "PlanHistories?planId=" +
        planId +
        "&fieldName=" +
        fieldName +
        "%20&fieldValue=" +
        fieldValue).pipe(map((response: PlanHistory) => {
          return <AuditDetail>{ updatedAt: response.UpdatedAt, updatedBy: response.UpdatedBy };
      }));
  }

That works. But I hate making that intermediate interface.

So how do I do the same thing, directly from JSON to AuditDetail?

You need to have the same name vars in the models, to do not use a map. — Abel Valdez
– Abel Valdez, Commented Aug 31, 2018 at 17:55

David Walschots · Accepted Answer · 2018-08-31 15:36:09Z

1

You want to have the Web API return camelCasing output, so you don't have to change the casing. See JSON and XML Serialization in ASP.NET Web API:

To write JSON property names with camel casing, without changing your data model, set the CamelCasePropertyNamesContractResolver on the serializer:
var json = GlobalConfiguration.Configuration.Formatters.JsonFormatter;
json.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

Then your code becomes:

getAuditDetails(planId: number, fieldName: string, fieldValue: string): Observable<AuditDetail> {
    this.log("Retrieving Audit Details");
    return this.http
        .get<AuditDetail>(`${this.webApiUrl}PlanHistories?planId=${planId}&fieldName=${fieldName}%20&fieldValue=${fieldValue}`);
}

edited Aug 31, 2018 at 15:36

answered Aug 31, 2018 at 15:28

David Walschots

12.7k5 gold badges39 silver badges59 bronze badges

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

Comments

Peter Mac · Accepted Answer · 2018-08-31 15:33:15Z

0

The mapping should be inferred, only difference is your casing, could you not update to make the names match?

answered Aug 31, 2018 at 15:33

Peter Mac

214 bronze badges

1 Comment

Seth Over a year ago

In this case sure, but I'd like to learn how in case i really do have to map something over. But beyond that, all of the UI project casing is camel. And every property within the webservice using PascalCase. I dont want to break convention, and i dont want to do that scope of a refactor.

Collectives™ on Stack Overflow

Rxjs - Mapping from json to typescript interface

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related