Angular 4 loop through json and get data base on id

Question

how can I get the content base on the id ?

how can I get the content when the id is 1 for example localhost:5555/product/1 ? my route file is already setup

I have a json file like

[
  {
    "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"
  }
]

in my component :

  ngOnInit() {
    this.route.params
      .subscribe(
         (params : Params) => {
           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 => {
    //     return res.filter(item => item.id === id)[0];
    //   });
  }

product.service.ts

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<string[]> {
    return this.http.get('assets/data/products.json')
      .map((res: Response) => res.json())
      //              .do(data => console.log('server data:', data))  // debug
      .catch(this.handleError);
  }

  getById(id: number): Observable<string[]> {
    return this.get()
      // 
      // .map((res: Response) => res.find( res => res.id == id));
      // .map(movies => movies.find(movie => 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);
  }
}

I'm passing the id to the getWhipById() in this point is where I get confuse the ProductService.get() 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

can you also list the service get method @marco, or if can you recreate a plunker for the issue — Rahul Singh, Jul 18 '17 at 10:04
I just added the service... but the service works find... shows all the content..what I need is to show the content of one particular product — Marcogomesr, Jul 18 '17 at 10:10
i guess your forgot to subscribe in your component after mapping — Rahul Singh, Jul 18 '17 at 10:11
Possible duplicate of [Angular 2 http get not getting](https://stackoverflow.com/questions/41381200/angular-2-http-get-not-getting) — AT82, Jul 18 '17 at 10:13

score 0 · Answer 1 · answered Jul 18 '17 at 10:15

An observable only runs if it is subscribed to, so if it returns a .map, but nothing subscribes to it, it will never run the .map. Try subscribing to the result of the map

getWhipById(id:number){
         let mapped = this.productService.get().map(
           res => {
             return res.filter(item => item.id === id);
           });
         mapped.subscribe((response) => {
          console.log('subscribe' + response.json());
        });        
      }

score 0 · Answer 2 · answered Jul 18 '17 at 10:21

0

need to call res.json() before call filter()??

this.ProductService
  .get()
  .map(res => res.json().filter(item => item.id === id))
  .subscribe(resp=>console.log(resp));

answered Jul 18 '17 at 10:21

Johnny Tung

1
3

Angular 4 loop through json and get data base on id

2 Answers2