angular 4 - Iterate json objects

Question

Below is the code to get the json data

    export class AppComponent  implements OnInit {
          observableBooks: Observable<Book[]>
          books: Book[];
          errorMessage: String;
          constructor(private bookService: BookService,private loki: LokiService) { }
          ngOnInit(): void {
               this.observableBooks = this.bookService.getBooksWithObservable();
               this.observableBooks.subscribe(
                   books =>  this.books = books,
                   error =>  this.errorMessage = <any>error);

        this.observableBooks.forEach(element => {
          console.log(element);/// here I can get the json format as expected

// console.log(element.fname); //this is not working
//  console.log(element.lname);// this is not working
        });

      }
    }

Consider the json as like below

[{fname: "name1",lname: "name2"},{fname: "name3",lname: "name4"}]

I want to get the values of fname and lname.

Can anyone help me?

That's not valid JSON. Is this an array of objects?, Then it should be enclosed in []. — Günter Zöchbauer
– Günter Zöchbauer, Commented Oct 29, 2017 at 13:36
@GünterZöchbauer, the problem is I can't use any json object name. If I use the applications show the below error Property 'fname' does not exist on type 'Book'" — Honey
– Honey, Commented Oct 29, 2017 at 13:40

Fateh Mohamed · Accepted Answer · 2017-10-29 13:52:55Z

1

confirm if you have these 2 properties inside your book model

export class Book{
  fname: string;
 lname: string;
}

and try this

this.observableBooks.subscribe(books => { 
          this.books = books,
          this.books.forEach(element => {
               console.log(element.fname);
               console.log(element.lname);
           })
          error =>  this.errorMessage = <any>error
 });

edited Oct 29, 2017 at 13:52

answered Oct 29, 2017 at 13:44

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

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

Collectives™ on Stack Overflow

angular 4 - Iterate json objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related