Mapping properties of C# ASPNET WebApi objects to Angular 2,

Question

I reprogrammed the Angular 2 heroes tutorial so that is runs within an ASP.NET webapplication with a Web API and communicates with that Web API instead of the in-memory web API. Everything works well. Only one question remains:

In the service environment of ASP.NET and in the Angular environment, I work with the object Hero. The naming convention of properties in C# objects is to start a propertyname with a capital letters. The naming convention in JS is to start a propertyname with lower case. I prefer follow this conventions in my coding. If I do this the objects of course are not proper deserialized anymore at the receiving site. How is usually dealed with this ?

The get (array) in the ASP.NET controller:

    // GET api/heroes 
public HttpResponseMessage Get()
{
  String heros =  JsonConvert.SerializeObject(GetHeroes().ToArray<Hero>());
  return new HttpResponseMessage()
  {
    Content = new StringContent(heros, System.Text.Encoding.UTF8, "application/json")
  };
}

GetHeroes() returns a list of Hero:

    public class Hero
{
  public int id { get; set; }
  public string name { get; set; }
}

The code in the hero.service.ts:

 getHeroes(): Promise<Hero[]> {
  return this.http.get(this.heroesUrl)
      .toPromise()
      .then(response => response.json() as Hero[])
      .catch(this.handleError);  }

and finally the hero class in hero.ts:

export class Hero {  id: number;  name: string;}

The raw code that the webservice delivers for the get is :

[{"id":0,"name":"Zero"},{"id":11,"name":"Mr. Nice"},{"id":12,"name":"Narco"},{"id":13,"name":"Bombasto"},{"id":14,"name":"Celeritas"},{"id":15,"name":"Magneta"}]

The question is how can I keep using in C# (this now causes problems)

    public class Hero
{
  public int Id { get; set; }
  public string Name { get; set; }
}

if i do this I do not get any error. It just returns the 6 objects in the browser, only the content of the records is not displayed.Like this:

As in my experience property mapping from c# to Angular is not case sensitive. As long as spelling is correct for properties, it shouldnt cause any problem. Are you getting any error? — Dheeraj Kumar, Sep 18 '17 at 11:53
Not case sensitive ? Interesting. To answer your question : I do not get any error. It just returns the 6 objects in the browser, only the content of the records is not displayed. This means that the objects are deserialized, only the properties are not matched. — Coffe Cold, Sep 18 '17 at 12:02

score 7 · Answer 1 · answered Sep 18 '17 at 12:21

7

Try this

public class Hero
{
  [JsonProperty(PropertyName = "id")]
  public int Id { get; set; }
  [JsonProperty(PropertyName = "name")]
  public string Name { get; set; }
}

Documentation Serialization Attributes

answered Sep 18 '17 at 12:21

Dan Nguyen

1,308
6
17

Can't because I don't have enough "reputation points" arghhh..Everything one wants to ask has already been asked... Can't even close the question. – Coffe Cold Sep 18 '17 at 12:37

score 3 · Answer 2 · answered Feb 26 '18 at 12:46

Add following to Application_Start in Global.asax.cs. This will force Json serialization to be in camel case.

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings = new JsonSerializerSettings
        {
            Formatting = Formatting.Indented,
            TypeNameHandling = TypeNameHandling.Objects,
            ContractResolver = new CamelCasePropertyNamesContractResolver()
        };

Mapping properties of C# ASPNET WebApi objects to Angular 2,

2 Answers2