I am working with an API that provides data in a specific format:
{"data": [
{ path: "some path", site_link: "link", features: ['feature1', 'feature2'] }
... ]}
Now, I have a service called getSites()
getSites(): Observable<Site[]> {
return this.http.get<Site[]>(this.API_URL).pipe(
map((site: SiteResponse): Site[] => {
return site.data.map(e => new Site().deserialize(e));
})
);
}
This is the Site response interface
export interface SiteResponse {
data: {
path: string,
siteLink: string,
features: string[],
}[];
}
Let's take a look at the Site model
export class Site implements Deserializable {
path: string;
siteLink: string;
features: Feature[];
deserialize(input: any): this {
Object.assign(this, input);
console.log('----input', input);
console.log('----this', this);
console.log('----features', input.features);
this.features = input.features.map(feature => new Feature().deserialize(feature));
return this;
}
}
Next, we have the Feature model
export class Feature implements Deserializable {
feature: string;
deserialize(input: any): this {
Object.assign(this, input);
return this;
}
}
Here is what I am receiving https://i.sstatic.net/sAwTA.png
I am facing an issue where the features content is splitting instead of creating objects for each value in the array.
The functionality works well on the first level of the array as it correctly creates an instance of Site.