Angular problem of How can I show only one record in an array object?

Question

I'm facing a problem about the when I get one record from array like this

data.service.ts

    getOneBookDetail(isbn:any) {
        const headers = new HttpHeaders().set("Content-Type", "application/json");
    
        // console.log("=============" + isbn )
        console.log(headers)
        return this.http.get('http://localhost:10888/bookdetail/?isbn='+ isbn).subscribe(
          (val) => { // Get has no error and response has body
            console.log("Get successful value returned in body", val);
          },
          response => {
            console.log("Get call in error", response);
          },
          () => { // Get has no error, response has no body
            console.log("The Get observable is now completed.");
          });
      }

home.component.ts
getBookDetail(book) {
    this.data.getOneBookDetail(book.isbn)   //isbn of book
   }

and I can click the title of book

 <a routerLink="/bookdetail/{{book.isbn}}" (click)="getBookDetail(book)"><h3>{{ book.title }}</h3></a>

and I can get a object I saw it in console

  Get successful value returned in body [{…}]
    
    0: {_id: "5fc91e5aa700213eb8c52de0", title: "A Promised Land"

[{…}] is 0: {_id: "5fc91e5aa700213eb8c52de0", title: "A Promised Land" ....

and now I want to get this object to a page call bookdetail to show only this book details but now still show all book the below is the bookdetail component

   import { Component, OnInit } from '@angular/core';
    import { DataService } from '../data.service';
    
    @Component({
      selector: 'app-bookdetail',
      templateUrl: './bookdetail.component.html',
      styleUrls: ['./bookdetail.component.scss']
    })
    export class BookDetailComponent implements OnInit {
    
      h1Style: boolean = false;
      books: Object;
    
      constructor(private data: DataService) {}
    
      ngOnInit() {
        this.data.getBooks().subscribe(data=> {
          console.log({data})  //show data
          this.books = data
          //console.log(this.books);
      })
      }
    
    }

in bookdetail html

  <h1>Book-detail</h1>
    <div *ngIf="books" class="bookdetail-block">
      <div *ngFor="let bookdetail of books" class="bookdetail">
        <h1>{{bookdetail.title}}</h1>
        <p><img [src]="bookdetail.image" ></p>
        <p>{{bookdetail.author}}</p>
        <p>{{bookdetail.price}}</p>
        <p>{{bookdetail.isbn}}</p>
        <p>{{bookdetail.description}}</p>
    
    </div>
    </div>

How can I only show I have choose?

I think the issue is in bookdetail ngOnInit()??

Eliseo · Accepted Answer · 2020-12-10 19:55:34Z

1

Zico, the idea generally is that you subscribe to ActiveRouter.params IN your "detail-component", see the docs: Well you use a switchMap to, after get the parameter, make the dataService.getOneBookDetail(id). In subscribe you equal the response to a variable and ony show the variable

book:any
constructor(private activatedRoute:ActivatedRoute,private dataService:DataService){}
ngOnInit() {
  this.route.paramMap.pipe(
    switchMap(params => {
      const ibs=params.get('isbn');
      return this.dataService.getOneBookDetail(ibs);
    }).subscribe(res=>{
      book=res;
    })
  );
}

Other idea is pass data between routes like show Netanel Basal

answered Dec 10, 2020 at 19:55

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

2 Comments

zico Over a year ago

HI, may I ask some question? may I know did I need to create a function to set the clicked book ?

Eliseo Over a year ago

Zico, you can, in your div <div (click)="dosomething(bookdetail)"> or <div (click)="dosomething(bookdetail.isbn)">` if only want pass to the function the ibsn. Or add a button to your table

Collectives™ on Stack Overflow

Angular problem of How can I show only one record in an array object?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related