Angular try from local json file find by id - json

Question

I have local json file (Kitchen types), i create KitchenTypesService there are 2 inside function GET AND FIND(ID), GET function its work, but not working find function, have error "ERROR TypeError: Unable to lift unknown Observable type", i try with find function get kitchen with id. Tell me what's the problem
Service
export class KitchenTypesService {
private _jsonURL = 'assets/data/kitchenTypes.json';
constructor(private http: HttpClient) {
this.get().subscribe((data) => data);
}
public get(): Observable<any> {
return this.http.get(this._jsonURL);
}
public find(id: number) {
this.get().subscribe(find((data: any) => data.id == id));
}
}
Component
export class KitchenDimensionComponent implements OnInit {
title: string = 'Virtuvės matmenys';
step: number = 2;
selectedKitchenId: number;
kitchen: any;
constructor(
private persistenceService: PersistenceService,
private httpKitchenTypes: KitchenTypesService
) {}
ngOnInit(): void {
this.initialSelectedKitchenId();
console.log(this.httpKitchenTypes.find(1));
}
initialSelectedKitchenId(): void {
this.selectedKitchenId = this.persistenceService.get('selectedKitchenId');
}
}
Local KitcehTypes.json
[
{
"id": 1,
"title": "Standartine",
"src": "/assets/images/kitchen-types/one-well.png",
},
{
"id": 2,
"title": "L forma",
"src": "/assets/images/kitchen-types/L-shaped.png",
},
{
"id": 3,
"title": "U forma",
"src": "/assets/images/kitchen-types/U-shaped.png",
},
{
"id": 4,
"title": "G forma",
"src": "/assets/images/kitchen-types/G-shaped.png",
}
]
Error Message
[

Answer 1

So there are a few ways to tackle this. You're right, HttpClient does cause the error you mentioned, but there is a way around this. May be this can help you.
Directly importing the JSON file using resolveJsonModuleTo work with this, you'll need to add the following in your tsconfig.json file
"resolveJsonModule": true Then you can simply import your data by adding this in your service:
import * as data from './kitchenTypes.json'
Note that your will need to update the file path accordingly
Once this is done, you can now access the JSON file data. You can view, and search the contents of the JSON file as per your need.
data: any = (data as any).default;