Angular ASP.NET: Http Get Web Api call works but no values shown by Angular

Question

I have a simple WebApi created in asp.net core which is as follows:

[HttpGet("GetHomePageData")]
        public IActionResult GetHomePageData()
        {
            HomePageData HomePageData = new HomePageData()
            {
                BookName = "Test Book",
                AddressCount = 55
            };
            return Ok(HomePageData);
        }

In angular, i try to call it as follows:

constructor(public http: Http, @Inject('BASE_URL') public baseUrl: string) {

        http.get(baseUrl + 'api/GetHomePageData') 
            .subscribe(res => this.homePageData = res.json() as HomePageData);   
}

In my view, i try to display HomePageData as follows:

<div *ngIf="homePageData">Total Address = {{ homePageData.AddressCount }}</div>

When run in Chrome, the Api call works fine and the page loads fine with no errors. However, no values are displayed, as in the 'homePageData.AddressCount' is empty.

Anybody know what happened here?

FYI, I've followed the SO answer in Observable type error: cannot read property of undefined

Thanks!

what do you see if you put `{{ homePageData | json }}` in your template? — hayden, Jan 05 '18 at 05:07
the first letter in 'addressCount' is now small caps.... weird.. but it works now!! thanks — user1034912, Jan 05 '18 at 07:52
Also you could have checked that by looking a the network tab in your browser dev console — hayden, Jan 05 '18 at 07:54

score 1 · Accepted Answer · answered Jan 05 '18 at 07:53

1

ASP.NET serializes with camelCase

instead of AddressCount use addressCount

answered Jan 05 '18 at 07:53

hayden

2,643
17
21

Angular ASP.NET: Http Get Web Api call works but no values shown by Angular

1 Answers1