My goal is to create a valid observable by making a GET request and subscribing to it. This way, I can utilize the retrieved data in multiple components within my application.
The expected JSON structure from the server should look similar to this:
{
"one": {
"some": "variable",
"more": "variables"
},
"two": {
"a": "variable",
"b": "variable"
},
"three": {
"things": [
{
"some": "variable",
"more": "variables
},
{
"some": "variable",
"more": "variables"
}
],
"peoples": [
{
"again": "variables",
"women": {
"next": "variable"
},
"man": {
"last": "variable"
}
}
]
}
}
Current approach: Referring to the Angular Documentation on Requesting a typed response, I have defined some data interfaces in the typescript file of a service named api.service:
export interface Response {
one: One;
two: Two;
three: Three;
}
export interface One {
some: string;
more: string;
}
export interface Two {
a: string;
b: string;
}
export interface Three {
things: Thing[];
peoples: People[];
}
export interface Thing {
some: string;
more: string;
}
export interface People {
again: string;
women: Women;
men: Men;
}
export interface Women {
next: string;
}
export interface Men {
last: string;
}
I have also implemented a function that makes a request to a specified URL within the service:
export class ApiService {
private url = 'https://example.com/api/1234';
constructor(private http: HttpClient) { }
getApiResponse() {
// Returns an Observable of type Response
return this
.http
.get<Response>(this.url)
}
Now comes the crucial question: Is this approach correct? And if so, how can I properly subscribe to the Observable returned by getApiResponse() in order to access, for example, the variable next within the Women interface?