display ngFor with json object return from service

Question

Im trying to display it in my html

*ngFor="let item of booksList; let i = index"

my ts file

ngOnInit() {
  this.booksDataService.getBooks().subscribe(
  function(response) { 
    this.booksList = response.books;
  },
);}

thanks in advance

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — AT82, Jul 28 '17 at 11:31

score 1 · Answer 1 · answered Jul 27 '17 at 20:52

1

  <li *ngFor="let item of booksList; let i = index">
    {{ item.author }} 
  </li>

answered Jul 27 '17 at 20:52

wesside

I even didnt try to print the value - i have some hard coded just cant see anything... This is my service but when i print booklist to the log i can see array of 7 objects so i beleive it's ok – eladr Jul 27 '17 at 21:10
@eladr item of bookList.Books – wesside Jul 28 '17 at 18:50

eladr · Accepted Answer · 2017-07-27T21:47:29.753

0

This is the correct answer for the help of other people... call to the service:

this.booksDataService.getBooks()
    .subscribe(
        allBooks => this.booksList = allBooks);}

html:

*ngFor="let item of booksList.books; let i = index"

edited Jul 27 '17 at 21:47

answered Jul 27 '17 at 21:26

eladr

score 0 · Answer 3 · answered Jul 28 '17 at 02:48

0

Here is the solution using async pipe:

*ngFor="let item of booksDataService.getBooks() | async; let i = index"

answered Jul 28 '17 at 02:48

Sonu Kapoor

I wouldn't services in templates. AoT will fail. – wesside Jul 28 '17 at 15:56
@wesside Can you please share a link with more information about that? – Sonu Kapoor Jul 28 '17 at 17:12
The linked issue discusses private members only unless I am missing something. I don't see a mention of services per se. – Sonu Kapoor Jul 28 '17 at 19:09
Expose your service, be my guest – wesside Jul 28 '17 at 19:30

3 Answers3