Angular 2 - Why is does this service return no data

Question

I have a service which queries for a json file hosted locally on my machine. The query to the service is called, but the return of the json data from the service query back to the component is consistently empty. However, using the developer tools in browser I can see that the json file with data is indeed being returned with a 200 ok.

Is there something fundamentally wrong with my subscriptions on the returning observable data? Any assistance is most appreciated.

@Injectable()
export class UserService {

    constructor(
        public http: Http,
    ) {}

    search(query: string): Observable<UserInfo[]> {
        return this.http.get('http://localhost/test.json')
        .map(res => res.json());


    }
}




valuechange(query) {

    console.log("calling service from component");

    this.inputFormControl.valueChanges
    .debounceTime(4000)
    .distinctUntilChanged()
    .subscribe(query => this.userService.search(query)
    .subscribe(data => {
        {
            this.data = data   
            console.log('this.users=' + this.data);
            console.log('this.users.length=' + this.data.length);
        }

        })); 
    console.log("data on return from service is " + this.data[1]);
}

Have you tried replacing localhost/test.json' with a relative path inside your website? — Moutabreath
What does this line log to the console? console.log('this.users=' + this.data); — Notmfb

LLai LLai · Accepted Answer · 2017-11-21T18:11:54

You should be using something like switchMap in your observable sequence to chain your valueChanges event emitter with your userService.search observable.

this.inputFormControl.valueChanges
.debounceTime(4000)
.distinctUntilChanged()
.switchMap(query => this.userService.search(query))
.subscribe(data => {
    this.data = data   
    console.log('this.users=' + this.data);
    console.log('this.users.length=' + this.data.length);
});

Angular 2 - Why is does this service return no data

1 Answers