错误TypeError：无法读取未定义的属性'json'

Question

Help me please understand and fix this error:

I'm trying to get data from the local server and as a result I see this error in the console:

ERROR TypeError: Cannot read property 'json' of undefined

("Postman" and the browser get and show me the response correctly)
The full err: Screeshot console error
I use Angular 4.3.1

My code looks like this:

SERVICE

import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Http, RequestOptionsArgs, Response} from '@angular/http';
import {ResponseContentType} from '@angular/http/src/enums';

export class User {
  constructor(public id: number,
            public name: string,
            public age: number,
            public occupation: string) {
  }
}

@Injectable()
  export class UserService {
  private userUrl = 'http://localhost:8000/api/v1/';

constructor(private http: Http) {
}

getUsers(name?: string): Observable<User[]> {
    return this.http.get(`${this.userUrl}users`, {params: {name}})
        .map((res: Response) => { return res.json() })
        .catch((error: any) => Observable.throw(error.json().error || 
    'Server error'));
}

COMPONENT

import 'rxjs/add/operator/switchMap';
import {Observable} from 'rxjs/Observable';
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, ParamMap} from '@angular/router';
import {User, UserService} from './user.service';
import {FormControl} from '@angular/forms';

@Component({
    templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
    users: Observable<User[]>;
    public search: FormControl = new FormControl();
    constructor(private service: UserService) {
    }

    ngOnInit() {
         this.users = this.search.valueChanges
           .startWith('')
           .debounceTime(800)
           .distinctUntilChanged()
           .switchMap(name => this.service.getUsers(name));
    } 
}

Answer 1

From what I can see in the screenshot you're having some issue retrieving the data from the server. Due to this you're falling into the catch branch and trying to do a json on an empty error.

Check your server and why it's not returning an error when the call is failing. That might give you a clue why the call on the API is not working.

But as per your initial question this has nothing to do with the response in the success branch of the observable. Your code is correct. You have to figure out why the call to your API is failing.

Edit

On a closer look I noticed that your request is not in the proper format you should be doing something like

getUsers(name?: string): Observable<User[]> {
    let myParams  = new URLSearchParams();
    myParams.append('name', name);

    let options = new RequestOptions({ params: myParams });

return this.http.get(`${this.userUrl}users`, options)
    .map((res: Response) => { return res.json() })
    .catch((error: any) => Observable.throw(error.json().error || 
'Server error'));
}