Iterate Array of object in Angular 4

Question

I want to interate array object inside the subscribe

test.ts file

  export class AppComponent  implements OnInit {
      title = 'app works!';
      observableBooks: Observable<Book[]>
      books: Book[];
      newarray: any[];
      errorMessage: String;
      constructor(private bookService: BookService) { }
      ngOnInit(): void {
           this.observableBooks = this.bookService.getBooksWithObservable();
               this.observableBooks.subscribe(books => { 
             for (let entry of books) {
               // push the value into db
          }

         let retrivedata: Array<number> = //retrive the db collection again




                error =>  this.errorMessage = <any>error
              });

      }

    }

test.html file

<ul *ngFor="let book of retrivedata | async">
      <li>{{book.price}}</li>
    </ul>

I need to iterate this "arrayofObj" in HTML page, which means angular template page

Chandru · Accepted Answer · 2017-10-29 16:57:24Z

3

Try like this :

export class AppComponent implements OnInit {

    private retrivedata: Array<any> = [];

    title = 'app works!';
    observableBooks: Observable<Book[]>
    books: Book[];
    newarray: any[];
    errorMessage: String;
    constructor(private bookService: BookService) { }
    ngOnInit(): void {
        this.observableBooks = this.bookService.getBooksWithObservable();
        this.observableBooks.subscribe(books => {
            console.log('books', books);
            this.retrivedata = books;
            for (let entry of this.retrivedata) {
                console.log('entry', entry)
            }
        }, (error) => {
            this.errorMessage = <any>error
        })
    }

}

answered Oct 29, 2017 at 16:57

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

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

1 Comment

AndyRED Over a year ago

Would it not be better to type cast it at observable level as an array of items? For example... this.http.get<Book[]>(url).subscribe(books => { books.forEach((book, index) => { console.log("Book: " + JSON.stringify(book ) + " : at index: " + index); }); }, error => console.log('Could not load book.'));

Andy · Accepted Answer · 2017-10-29 17:40:10Z

You have to declare a class variable to hold the information you are getting inside subscription 'books'.

You cannot use let retrivedata: Array<number> = //retrive the db collection again on your view. You need to declare this variable in a class level. Take a look:

 export class AppComponent  implements OnInit {
  title = 'app works!';

  retrivedata: Array<object> = []; // your view variable has to be created in a class level

  observableBooks: Observable<Book[]>
  books: Book[];
  newarray: any[];
  errorMessage: String;

  constructor(private bookService: BookService) { }

  ngOnInit(): void {

       this.bookService.getBooksWithObservable().subscribe(books => { 
         books.forEach(entry => {
           this.retrievedata.push(entry);  //assign the data from subscription to your class variable
         }
      }

 }

then in your view:

<ul *ngFor="let book of retrivedata"> // use your class variable in your view
  <li>{{book.price}}</li>
</ul>

you have to use this keyword to access them inside functions this.my_class_variable_example
you have to add the this keyword to your forEach as I have explained.
i didn't notice he had another class books, however, the books in the observables is not the same as the class. therefore no this added to that.

br.julien · Accepted Answer · 2017-10-29 16:59:08Z

0

Update :

I think if we make the code a bit cleaner, it should look close to this :

app.component.ts :

export class AppComponent implements OnInit {    
    books: Book[];
    errorMessage: string;
    constructor(private bookService: BookService) { }

    loadBooks() {
        this.bookService.getBooksWithObservable().subscribe(
            (res) => this.onSuccess(res.json),
            (res) => this.onError(res.json)
        );
    }

    ngOnInit() {
        this.loadBooks();
    }

    private onSuccess(data) {
        this.books = data;
    }
    private onError(error) {
        this.errorMessage = error.toString();
    }
}

HTML :

<div *ngFor="let book of books">
    <span>{{book.price}}</span>
</div>

edited Oct 29, 2017 at 16:59

answered Oct 29, 2017 at 15:59

br.julien

3,4602 gold badges28 silver badges44 bronze badges

6 Comments

Honey Over a year ago

I can't declare 'arrayofObj', I'm geting the following error Cannot find name 'arrayofObj'

br.julien Over a year ago

You need to declare arrayofObj as a class variable (like you did for books and errorMessage). It should be arrayofObj: any[]; and then you access it with this.arrayofObj inside ngOnInit

br.julien Over a year ago

Can you edit your question to show what you have now in your ts file and in your html ?

HDJEMAI Over a year ago

are you using forEach to iterate over books and then access arrayofObj ?

br.julien Over a year ago

I don't understand your code, and some variables disappeared. What is retrivedata and newarray ? I am not sure if this is what you want to achieve, but you don't need to use a for loop inside your subscribe to get the books, you just assign it to a variable.

|

HDJEMAI · Accepted Answer · 2017-10-29 18:02:53Z

0

If you want to iterate an array, but you are inside the subscribe, and if you are using forEach, you need then to add the this parameter for forEach to access the outside scope.

Example:

this.observableBooks.subscribe(
   (books) =>  {
                   this.books = books;

                   //iterate over arrayofObj
                   books.forEach( (book) => {
                                              //this will work 
                                              this.arrayofObj.push({fname: this.book.name});
                                  }, this);
                   });

edited Oct 29, 2017 at 18:02

answered Oct 29, 2017 at 16:47

HDJEMAI

9,84048 gold badges78 silver badges99 bronze badges

6 Comments

Honey Over a year ago

yes, I tried, but getting

ERROR TypeError: Cannot read property 'dispose' of null     at AsyncPipe.webpackJsonp.../../../common/@angular/common.es5.js.AsyncPipe._dispose (common.es5.js:2761)

HDJEMAI Over a year ago

I used that in my own project.

Honey Over a year ago

<div *ngFor="let obj of arrayofObj"> <span>{{obj.fname}}</span> <span>{{obj.lname}}</span> </div> shall I use array of obj like this in html

Honey Over a year ago

for (let entry of books) {           console.log(entry); // 1, "string", false           try {             users.insert({               username: entry.name              });             } catch(error) {           //  console.log(error);             }                 }        console.log(users.get(1));       this.bookArr = db.getCollection('users').data || db.addCollection('users', {         unique: ['username']       }).data;

HDJEMAI Over a year ago

please edit your code in the question. difficult to read in comment. you need to populate arrayofObj inside the subscribe depending on the values in this.books in order then to use it in the UI template. confirm if this is the case.

|

Amir Touitou · Accepted Answer · 2018-02-08 09:17:10Z

0

  this.service.getDevicesByJson().subscribe(data => 
  {
    this.devicesJson = data;

    objArray = JSON.parse(this.devicesJson.toString());

    for(let obj of  objArray)
    {
      let info = new DeviceInfo();
      info.Address = obj["deviceAddress"]
      info.Name = obj["deviceName"]

      this.devices2.push(info)
    }

  });

answered Feb 8, 2018 at 9:17

Amir Touitou

3,5191 gold badge39 silver badges33 bronze badges

Collectives™ on Stack Overflow

Iterate Array of object in Angular 4

5 Answers 5

1 Comment

3 Comments

6 Comments

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

6 Comments

6 Comments

Comments

Related