get single data from local json with id

Question

I'm building list app with ionic 4 .all item list view work from local json , but single item with id not get from local json

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'details/:id', loadChildren: './details/details.module#DetailsPageModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

home.page.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import {map} from 'rxjs/operators';
import { Observable } from 'rxjs';
import { RecipiService } from '../services/recipi.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  //  jsons:any;


  constructor(private recipiservice:RecipiService ){
    this.recipiservice.getData();
  }
}

details.page.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RecipiService } from '../services/recipi.service';

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
  information = null ;

  constructor(private activatedRoute:ActivatedRoute,private recipiservice:RecipiService) { }

  ngOnInit() {
    let id = this.activatedRoute.snapshot.paramMap.get('id');
    this.recipiservice.getDetails(id).subscribe(result =>{
      console.log('details', result)
      this.information = result;
    });
  }

}

recipi.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class RecipiService {
  jsons: any;
  url = '/assets/resource.json';


    //json:any;
   constructor(private http:HttpClient) {}

  getData(){

    let data: Observable<any> = this.http.get(this.url);
    data.subscribe(results =>{
      // console.log(this.jsons);
        return this.jsons = results;
    })
}

getDetails(id){
   //console.log(id);
   return this.http.get(this.url); //how to get single item with id & this line code not complate . please help me for complate my code 
}
}

here all item get . but i went get to singel item

Like it, get single item with id

this is ionic 4 app.this is ionic 4 app.this is ionic 4 app.this is ionic 4 app.this is ionic 4 app.this is ionic 4 app.this is ionic 4 app.

Answer 1

You can do the following in your service's code:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

import { map } from 'rxjs/operators'; // make sure to import the map operator


@Injectable({
  providedIn: 'root'
})
export class RecipiService {
  jsons: any;
  url = '/assets/resource.json';


  //json:any;
  constructor(private http:HttpClient) {}

  getData(){

    let data: Observable<any> = this.http.get(this.url);
    data.subscribe(results =>{
      // console.log(this.jsons);
        return this.jsons = results;
    })
  }

  getDetails(id){
    return this.http.get(this.url)
      .pipe(map(response) => {
        return response.find((item) => (item.id === id));
      })
  }

}

Since I'm using a === for comparison, please make sure the id that you pass into getDetails and the id property from the server response within each item have same data types. Ie both should be number, or both should be string values.

Stackblitz Working Example

Hope this helps.