Angular biding array of custom objects - uppercase/lowercase issue names of property from httpget

1
votes

Description of what I am doing.

I am trying to display the table of my custom object comes from the server. I am calling the httpclient.get and cast the json to an array of my custom object (using build in functionality in httpclient) and in subscribe function submitting to own property. Next I am trying to display the content to the table using binding and *ngFor. After code section showing the issue. I am using Angular-8.

Code

All code is simplified to show a problem. I move also service to component for simplicity.

Simpliest class:

export class Person {
    public Name: string;
}

My component

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Person } from '../models/person';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  public persones: Array<Person>;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.getPeople();
  }

  private getPeople(): void {
    this.http.get<Array<Person>>('https://localhost:44368/api/person')
    .subscribe(      
      x => this.persones = x,
      () => console.log('error getting people')    
    );

  }
}

Html part

<div>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th>name lowercase</th>
        <th>Name Upercase</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let item of this.persones'>
        <td>{{ item.name }}</td>
        <td>{{ item.Name }}</td>
      </tr>
    </tbody>
  </table>
</div>

Problem

Problem is that in html the table with item.name (lowercase) is displaying and item.Name (uppercase) is not displaying and my own property has upercase letter for property. I was excepting and it is my experience that when cast to angular objects I should use property of these custom objects. I know that these lower case comes from json from server, but it should cast to objects from angular.

I was trying to do casting like using as or using Observable but was not help.

Also when I changing type of persnones and change type of getting cast I got the same result for example

public persones: string;
this.http.get<string> ...blabla...

I still got the same result so my persones property is treated like a typical json object.

2
angulartypescripthttp-getangular-componentssubscribe
Can you post the original server response (JSON)? – Tsvetan Ganev

2 Answers

2
votes

Typescript is a build time construct - at runtime it's JavaScript and the types don't matter. It won't do any magical mapping for you, so if the server returns an array with name lowercased this is what you'll get.

The best way to diagnose this would be to inspect the network request in the developer tools, and adjust your type accordingly, or map the incoming object to the format you desire

2
votes

I would recommend going with the lowercase property names as it's the default behaviour of json responses.

However, to answer your question. This can be solved by configuring the OutputFormatter (.net backend)

public void ConfigureServices(IServiceCollection services)
{
    // Add framework services.
    services.AddMvc()
        .AddMvcOptions(options =>
        {
            options.OutputFormatters.Add(new PascalCaseJsonProfileFormatter());
        });
}