How to display data when response is an array of objects from an http request?

Question

Hie guys i am trying to implement search feature using angular2 http request with the help of this link http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html ....In this example the response from wiki will be an array of string so the code will be like this...

@Component({
selector: 'my-app',
 template: `
<div>
  <h2>Wikipedia Search</h2>
  <input type="text" [ngFormControl]="term"/>
  <ul>
    <li *ngFor="#item of items | async"></li>
  </ul>
</div>
 `
 })
export class App {
items: Observable<Array<string>>;
 term = new Control();
 constructor(private wikipediaService: WikipediaService) {
this.items = wikipediaService.search(this.term.valueChanges);
}
}

If the response is an array of objects then i am changing this statement from

items: Observable<Array<string>>; to items: Observable<Array<object>>;

but i am not getting it...somebody please show me a way to implement if the response from remote server is an array of object ... Here is my demo http://plnkr.co/edit/BE3l7lQpic9rzDZyomhP?p=preview Assuming the response is array of objects please guide me

Thierry Templier · Accepted Answer · 2016-03-03 13:19:07Z

2

You forgot to include the operators you use. You can add this in your imports:

import {Injectable} from 'angular2/core';
import {URLSearchParams, Jsonp} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime'; // <----

@Injectable()
export class WikipediaService {
  (...)
}

See this plunkr: http://plnkr.co/edit/ybShAY1hOLoGG2WHlHTW?p=preview.

edited Mar 3, 2016 at 13:19

answered Mar 3, 2016 at 12:50

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

5 Comments

abhilash reddy Over a year ago

Thanks Thierry but when the response is Array of objects then what changes will you make in your component and html file? Can u please update the plnkr assuming u get response something like this [ object1,object2,object3 ....]

Thierry Templier Over a year ago

You're welcome! Here is a plunkr describing this: plnkr.co/edit/OZXlXL7DnB15alaCXCAm?p=info. Is it what you need?

abhilash reddy Over a year ago

Yea Thierry Templier...Can i use the same code to implement when user types something so that i can show some value returned in a list?

abhilash reddy Over a year ago

Because i need to implement it using Debounce Time and distinctUntilChanged

Thierry Templier Over a year ago

Sure you can ;-) Have a look at this plunkr: plnkr.co/edit/MhDl8hWjwhAlaUw2i8hy?p=preview.

Collectives™ on Stack Overflow

How to display data when response is an array of objects from an http request?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related