title: Angular 4 loop through json and get data base on id
body: <p>how can I get the content base on the id ?</p>
  
  <p>how can I get the content when the id is 1 for example localhost:5555/product/1 ?
  my route file is already setup</p>
  
  <p>I have a <strong>json</strong> file like</p>
  
  <pre><code>[
    {
      "id": "0",
      "name": "xxxx",
      "icon": "https://wikidownload.com/Download/xxxx.png",
      "Website":"http.xxx.com"
    },
    {
      "id": "1",
      "name": "zzz",
      "icon": "zzzz.png",
      "Website":"http.zzz.com"
    },
    {
      "id": "2",
      "name": "yyy",
      "icon": "yyy.png",
      "Website":"http.yyy.com"
    }
  ]
  </code></pre>
  
  <p>in my <strong>component</strong> :</p>
  
  <pre><code>  ngOnInit() {
      this.route.params
        .subscribe(
           (params : Params) =&gt; {
             this.id = params.id; //get the id from the route
             this.getWhipById(this.id);
           }
         )
    }
  
    getWhipById(id:number){
      console.log ( id );
      // console.log ( this.productService.getById(id) );
  
      // this.productService.get().map(
      //   res =&gt; {
      //     return res.filter(item =&gt; item.id === id)[0];
      //   });
    }
  </code></pre>
  
  <p><strong>product.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  
  
  @Injectable()
  export class ProductService {
  
  
    constructor(private http: Http) {}
  
  
  
    /**
     * Returns an Observable for the HTTP GET request for the JSON resource.
     * @return {string[]} The Observable for the HTTP request.
     */
    get(): Observable&lt;string[]&gt; {
      return this.http.get('assets/data/products.json')
        .map((res: Response) =&gt; res.json())
        //              .do(data =&gt; console.log('server data:', data))  // debug
        .catch(this.handleError);
    }
  
    getById(id: number): Observable&lt;string[]&gt; {
      return this.get()
        // 
        // .map((res: Response) =&gt; res.find( res =&gt; res.id == id));
        // .map(movies =&gt; movies.find(movie =&gt; movie.id == id));
    }
    /**
     * Handle HTTP error
     */
    private handleError (error: any) {
      // In a real world app, we might use a remote logging infrastructure
      // We'd also dig deeper into the error to get a better message
      let errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
      console.error(errMsg); // log to console instead
      return Observable.throw(errMsg);
    }
  }
  </code></pre>
  
  <p>I'm passing the id to the <code>getWhipById()</code> in this point is where I get confuse
  the <code>ProductService.get()</code> will get all content ..I used map filter , map find but I could get the content just for the id that I'm passing. Another thing is to debug ...  if I do console.log() it only shows observable and other properties but not anything about the json content</p>