void is not assignable to type value User Angular 2

Question

I am calling a JSON file using rx/js Observable.

Service

constructor(private http: Http){

}

 getUserById():Observable<User[]> {

let url = this.mockData;
let header = new Headers({'Content-Type': 'application/json'});

return this.http.get(url)
    .map((res:Response) =><User[]>res.json())
    .do(data => console.log("User Data: "+JSON.stringify(data)))
    .catch((error:any) => Observable.throw(error) || "Mock Data Error get by role")
};

component:

    @Input() users: User[] = [];

        userTemp: User[] = [];

getUserById(userId){

        this._searchService.getUserById()
            .filter(users => {
                for(let user of users){
                    if(user.userName === userId){
                        this.userTemp.push(user);
                    }}});

        return this.userTemp;

    }

under users => { says when I hover over it (Users: Users[]) => void is not assignable) => boolean.

I know there is a small detail I am missing but I am not sure where it is. Any advice would be greatly appreciated.

------------------------------update 1-------------------------- Trying this now but and it compiles but doesn't work.

this._searchService.getUserById()
            ._do(users => {
                for(let user of this.users){
                    if(user.id == userId){
                        this.userTemp.push(user);
                    }
                }
            });

---------------------Update 2-------------------------- I got some advice from the posts below and now I am trying to do it like this, but it is rendering nothing and giving no errors.

In component:

@Input() users: IUser[] = [];

Method being called in component:

case 'role':
          this.users = this.getUserByRole(this.role);
          console.log(this.role);
          break;

method in component:

 getUserByRole(role){

        this._searchService.getUsers()
            .subscribe(users => {
                for(let user of users) {
                    if(user.role == role){
                        this.users.push(user);
                    }}});

        return this.users;
    }

Service method:

getUsers(): Observable<IUser[]> {
        let users = this.http
            .get(this.url)
            .map(res => res.json());
        return users;
    }

In the console it will print whatever I put in the input box and I confirmed the url for the http call is valid.

I am trying to do it like this so all I need to do is change the http url to have headers and a real url later without have to change to much.

--------------Update 3----------------------

In the HTML I have:

 <td>{{data.role | async}}</td>

method in component:

getUserByRole(role){

        return this._searchService.getUsers()
            .map(data => {
                return data.filter((x:any) => x.role == role)
            });
    }

Field:

 @Input() users: Observable<IUser[]>;

Calling the method:

case 'role':
         console.log(this.getUserByRole(this.role));
         this.users = this.getUserByRole(this.role);
         console.log(this.users);
         break;

error:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

In my searchService I am now looking at doing it this way but still not working:

 findUserByRole(user: IUser) {
        return this.http.get(this.url)
            .map(res => res.json())
            .subscribe(
                data => {

                }
            );
    }

Answer 1

EDIT based on updates:

Not entirely sure, what you are trying to achieve with: <td>{{data.role | async}}</td>, but if you want to filter users based on a specific role using async pipe would be to declare users as an Observable like you have. When you want to filter, have your switch statement (like you have):

case 'role':
      this.users = this.getUserByRole(this.role);
      break;

and in this method you return an observable of the filtered array

getUserByRole(role){
    return this._searchService.getUsers()
        .map(data => {
            return data.filter((x:any) => x.role == role)
        });
}

which you then can use together with async pipe, which displays the users which have the filtered values from your switch-case, whatever that filter value might be. In this case we have filtered above based on a role value.

<div *ngFor="let user of users | async">

DEMO

Update 2:

Now seeing your JSON, the problem should be that your array is in an object named data. You want the array from the response, so you need to extract that array from the object, so change your mapping a bit:

return this.http.get(url)
    .map((res:Response) =><User[]>res.json().data) // here! Extract the array from the object "data"
    .do(data => console.log("User Data: "+JSON.stringify(data)))
    .catch((error:any) => Observable.throw(error) || "Mock Data Error get by role")
};

---

Original post:

filter actually does the filtering for you, you do not need to iterate the response. Unfortunately I do not see that you are able to return userTemp other than as an observable in your filtering. You actually have to subscribe to it and assign the values from the filter to your userTemp, the following will always return undefined as you are returning the array outside the callback:

getUserById(userId){
   this._searchService.getUserById()
     .map(users => {
        ......
     });
     return this.userTemp; // data has not been assigned yet, when you return it.
}

This is just how it works. You need to do manipulate your data inside the callback! Here is some more info: How do I return the response from an Observable/http/async call in angular2?

But back to your code, You can map several times, so here you would use map together with filter to get the data you want:

getUserById(userId) {
 return this.service.getUsers()
   .map(data => {
     return data.filter((x:any) => x.userName == userId)
   });
}

So this returnes an observable to where you need it.

But as said, AFAIK you cannot return the userTemp as a plain JS array.

Answer 2

The callback for .filter requires that you return a boolean, but you're returning nothing (aka void). You need either need to return a boolean or use a different method.