When I receive the json response from my product information api, it is structured like this:
{
_productDepartment : null,
_productClass : null,
_productMaterial : null,
_productStyle : null,
_productDetails :
{
_productSkuKey : 800,
_description : "Product Description",
_collection : "Collection1",
_department : 200,
_productSize : "Size1",
_productClass : 45,
_productStyle : 1234,
_material : "Product Material",
_price : 100.00,
_mediaFileName : "XYZ"
},
_products : null,
_errorDetails :
{
_message : "success",
_status : 200
}
}
For this specific api call, my main focus lies on extracting the productDetails and errorStatus. To structure the productDetails object based on the json response received above, I have created two interfaces: one for product and the other for productdetails.
This is how my interfaces look:
//product.ts
import { IProductDetails } from './productDetails';
export interface IProduct {
productDepartment: string;
productClass: string;
productMaterial: string;
productStyle: string;
productDetails: IProductDetails;
products: null;
errorDetails: string;
}
//productDetails.ts
export interface IProductDetails {
productSkuKey: number;
description: string;
collection: string;
department: number;
productSize: string;
productClass: string;
productStyle: number;
material: string;
price: string;
mediaFileName: string;
}
In one of the services, I make this call:
getProducts(storeId: string, productSKU: string) {
this.products = this.baseUrl + '/products/' + storeId + '/' + productSKU;
return this.http.get<IProduct[]>(this.products).catch(this.errorHandler);
}
And in one of the components, I use the service like so:
this._transactionService.getProduct('98', '343').subscribe(data => this.products = data._productDetails);
My query is whether this approach ensures that the object used in my code aligns with the json response data. How does it understand to map _productSkuKey with productSkuKey in my interface?