Angular2 getting data from web api no display

Question

I'm new at angular2 and I'm trying to get data from web api with my angular2 application. I'm using Visual Studio 2015. I have no error but the datas just don't display, I should get all the users Login display on my html page but it's empty, it shows the right number of existing Logins though, here's the result :

my component :

import { Component } from "@angular/core";
import { Http, Response } from "@angular/http";

@Component({
    selector: "team",
    templateUrl: "../Scripts/components/team/team.component.html"
})
export class TeamComponent {
    public users: IUserID[];
    private _userIdUrl = "http://localhost:61142/api/UserID";
    constructor(private http: Http) {
        http.get(this._userIdUrl).subscribe(result => {
            this.users = result.json();
        });
    }
}

interface IUserID {
    Login: string;
}

and my controller :

 [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class UserIDController : ApiController
    {
        IUserIDBusiness userIDBusiness;

        public UserIDController()
        {
            userIDBusiness = WebApiConfig.userIDBusiness;
        }

        public IEnumerable<UserID> Get()
        {
            return userIDBusiness.GetAll();
        }

[EDIT] Html :

<ul>
    <li *ngFor="let user of users">
        {{ user.Login }}
    </li>
</ul>

What am I missing ?

To partly answer your question.... You are missing the template and JSON structure from your question ;) — AVJT82
– AVJT82, Commented Mar 23, 2017 at 9:03

elzoy · Accepted Answer · 2017-03-23 09:06:25Z

2

Change {{ users.Login }} to {{ user.Login }}

answered Mar 23, 2017 at 9:06

elzoy

5,46513 gold badges45 silver badges67 bronze badges

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

4 Comments

Mantas Over a year ago

Assuming that the 'Login' property is valid/existing on the IUserID type.

Sam Caneau Over a year ago

I made the change but doesn't make a difference :/

elzoy Over a year ago

console.log(this.users) inside subscription and check if you get an array of objects with Login property.

Sam Caneau Over a year ago

ok, it does't display anything in the console, even if I write something in the console.log

Kerim Emurla · Accepted Answer · 2017-03-23 14:05:55Z

1

A better approach for this is to actually create a service where you make the http call, instead of making the call in the constructor.

Start by creating a service which could look like this for example:

import { Injectable } from "@angular/core";
import { Http, Response } from '@angular/http';
import 'rxjs/operator/map';

@Injectable()
export class UserService extends ServiceBase {
    private _userIdUrl = "http://localhost:61142/api/";

     getUserData(userId: number) {
     return http.get(`this._userIdUrl/${userId}`)
        .map((response: Response) => response.json());
     }
}

After creating your service you should inject it in your component(having said that you registered the service in the app.module providers)

Read more about services if you don't know how to register your service.

Then your component would look something like this:

import { Component } from "@angular/core";
import { UserService } from '..' // import the service where you stored it.

@Component({
    selector: "team",
    templateUrl: "../Scripts/components/team/team.component.html"
})
export class TeamComponent implements OnInit {
    public users: IUserID[];
    constructor(private _userService: UserService) {
    }
}

ngOnInit() {
    this._getUserData();
}

private _getUserData() {
    this._userService.getUserData(userId) // pass the userId here. you can get it from the router params or somewhere else.
        .subscribe(response => {
            if(response){
                this.users = <IUserID>response.json();
            }
        },
        error => console.log(error)) // handle errors the way you like.
}

interface IUserID {
    Login: string;
}

You see, by taking this approach you abstract the way data is fetched from the server and your component has no idea or does not care about how data is fetched, which is good because this means you decompled your logic for getting data from the component.(Not to mention your code in the component gets a lot cleaner)

edited Mar 23, 2017 at 14:05

answered Mar 23, 2017 at 9:24

Kerim Emurla

1,1618 silver badges16 bronze badges

5 Comments

Sam Caneau Over a year ago

Thx for you answer, I'm gonna try this !

Kerim Emurla Over a year ago

@SamCaneau, sure thing. Let me know if you have any issues. And make sure you are getting the right data from the server.

Sam Caneau Over a year ago

I got an error on map : Map does not exist on type Observable<Response> .. I made the import though

Sam Caneau Over a year ago

I tried all the possible ways of import for map with rxjs, I still get that error :/

Kerim Emurla Over a year ago

@SamCaneau, I've edited my answer. Check it out. Plus I've changed the code so now your service accepts an userId parameter and makes the http call according to that Id.

Collectives™ on Stack Overflow

Angular2 getting data from web api no display

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related