javascript - 从本地json获取带有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

这是 ionic 4 应用程序。这是 ionic 4 应用程序。这是 ionic 4 应用程序。这是 ionic 4 应用程序。这是 ionic 4 应用程序。这是 ionic 4 应用程序。这是 ionic 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));
      })
  }

}

由于我使用 === 进行比较，请确保您传递给 getDetails 的 id 和 每个项目中服务器响应的 >id 属性具有相同的数据类型。 IE。两者都应该是数字，或者两者都应该是字符串值。

Stackblitz Working Example

希望这有帮助。