Is there a way to specify a local path to a JSON file in HTML, similar to how the src attribute works for an HTML img tag?
Imagine something like this:
<my-component data-source="localPath">
Here, localPath would point to a local JSON file containing the data to be used by my-component. This would allow me to use the same component multiple times in my HTML, but with each instance reading from a different JSON file.
I have successfully implemented this for a single instance within my-component.component.ts:
import myData from 'localPath';
let content = myData.data as MyInterface;
This solution is based on a previous question I posed regarding Angular 12 and JSON file reading. However, the drawback here is that all instances of my-component are restricted to using the same JSON file at localPath.
I am considering creating a service to handle file loading, similar to how you would retrieve data from an external URL or API. But I wonder if there's a simpler approach since I am only dealing with local files, not external sources.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class MyService {
constructor(public http: HttpClient) { }
getData(url: string): Observable<Record<string, any>> {
return this.http.get(url)
.pipe(map((res) => {
return res;
}))
}
}
The above code snippet is inspired by a blog post and includes a fix mentioned in my earlier inquiry.
An ideal scenario would involve usage like this:
<div>
<my-component data-source="./localPath/data1.json" />
<my-component data-source="./localPath/data2.json" />
</div>
In this setup, data1.json and data2.json represent two distinct files serving as data sources for separate instances.