how to send parameter in an http get request

Question

Am get data from the backend(api) and displaying it using ngFor like this:

<li *ngFor="let event of events">
   {{event.name}}
   {{event.city}} 
</li>

my results is like this;

 wedding
    city 1

  graduation
    city 2

now i want to fetch detail information about an event when a user click on the event and i want to achieve this by passing an event_id which i didn't display to the view to the back-end.

  <li *ngFor="let event of events" (click)="moreDetails(event)">
       {{event.name}}
       {{event.city}} 
    </li>

And then in my component:

 moreDetails(ev){
     //
     this._http.get(this.url + event_id)
        .map((res:Response) => res.json())
        .subscribe(
            data => this.getEventData = data,
            error =>this.logError(error),
            () => console.log('get request completed sucesfully')
        );
 }

thanks in advance

Answer 1

I assume your events have ids, so your event id will be ev.id

moreDetails(ev){
     //
     this._http.get(this.url + ev.id)
        .map((res:Response) => res.json())
        .subscribe(
            data => this.getEventData = data,
            error =>this.logError(error),
            () => console.log('get request completed sucesfully')
        );
 }

Answer 2

Just pass you unique key(id) along with the url by appending(or we can say concatenating string with unique_id) to it like this:-

 moreDetails(ev){
     let url = this.url+event.id+'/';
     this._http.get(url)
        //...other functionality 
 }