Parse JSON to model in React Native getting undefined - react-native

Question

I'm trying to map my JSON Object to a model class like that:
export class Product {
constructor(props) {
this.name = props.Name
this.items = props.Items
this.price = props.Price
this.productID = props.ProductID
this.medias = props.Medias
}
}
But when I get JSON and try to parse to my Model I'm getting the following error
TypeError: undefined is not an object (evaluating 'mostSoldProductsApiResponse.map'
There's my parse code:
const mostSoldProductsApiResponse = await mostSoldProductsApiCall.json().Products;
const arrayProducts = mostSoldProductsApiResponse.map(function(item) {
return new Product(item.Product)
})
If I don't parse the JSON Object to new Product() constructor, the code works fine. But I would like to organize the code. Therefore I would like to implement Product class.

Answer 1

It might be you are using await not on what you expect.
The line await mostSoldProductsApiCall.json().Products is actually first returning a promise, then awaiting on the resulting promise field Products which is undefined because it is not the result of the promise.
something equivalent to:
const promise = mostSoldProductsApiCall.json() // this is the promise
const unresolvedProducts = promise.Products // this is undefined
const mostSoldProductsApiResponse = await unresolvedProducts // this resolves to undefined
Solution
Use parenthesis to await on the actual promise, like so:
const mostSoldProductsApiResponse = (await mostSoldProductsApiCall.json()).Products
Another option:
const mostSoldProductsApiResponse = await mostSoldProductsApiCall.json()
const arrayProducts = mostSoldProductsApiResponse.Products.map(function(item) {
return new Product(item.Product)
})
Hope this helps!