Here is an example of Json data:
{
"restaurant": null,
"details": [
{
"text": {
"text": "Tea",
"coordinateX": 311
},
"price": {
"unitPrice": 5.0,
"coordinateX": 389
}
},
{
"text": {
"text": "Americano",
"coordinateX": 311
},
"price": {
"unitPrice": 41.24,
"coordinateX": 205,
}
},
{
"text": {
"text": "Latte",
"coordinateX": 130
},
"price": {
"unitPrice": 43.24,
"coordinateX": 205,
}
}
]
}
An issue arises when mapping the nested objects in the Json result API response to the corresponding models. Only the outermost object gets mapped.
The ImageResult Object - properly mapped:
export class ImageResult {
constructor(
public Restaurant: string,
public CapturedDetails: Array<Details>
) {}
static adapt(item: any): ImageResult {
return new ImageResult(
item.restaurant,
item.details
);
}
}
The Details Object - not correctly mapped and shows as a generic Object:
export class Details {
constructor(
public Text: Word,
public UnitPrice: Price
) {}
static adapt(item: any): Details {
return new Details(
item.text,
item.price
);
}
}
The Word Object - also not properly mapped and appears as a generic Object:
export class Word {
constructor(
public Text: string = '',
public CoordinateX: number = 0
) {}
static adapt(item: any): Word {
return new Word(
item.text,
item.coordinateX
);
}
}
When calling the API, here's how the mapping process looks like:
GetText(formData: FormData): Observable<ImageResult> {
return this.httpClient.post(this.getServiceUrl('TextCapture'), formData)
.pipe(map(ImageResult.adapt));
}