получить отдельные данные из локального JSON с идентификатором

Question

Я создаю приложение со списком с ионной 4 .Все элементы списка работ, вид с местного json, но один элемент с идентификатором не получен из локального json

приложение-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 
}
}

здесь все предметы получаются. но я пошел получить сингл

Понравилось, получить один предмет с идентификатором

это ионное 4 приложение. Это ионное 4 приложение. Это ионное 4 приложение. Это ионное 4 приложение. Это ионное 4 приложение. Это ионное 4 приложение. Это ионное 4 приложение.

Answer 1

Вы можете сделать следующее в коде вашей услуги:

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));
      })
  }

}

Поскольку я использую === для сравнения, убедитесь, что id, которое вы передаете в getDetails, и свойство id из ответа сервера в каждом элементе имеют одинаковые типы данных. То есть оба должны быть числами, или оба должны быть строковыми значениями.

Рабочий пример с использованием Stackblitz

Надеюсь, это поможет.