My Purchase class is fairly simple:
export class Purchase {
customer!: Customer;
shippingAddress!: Address;
billingAddress!: Address;
order!: Order;
orderItems!: OrderItem[];
}
I have a checkout component that performs the following actions:
// populate purchase - customer
purchase.customer = this.checkoutFormGroup.controls['customer'].value;
// populate purchase - shipping address
purchase.shippingAddress = this.checkoutFormGroup.controls['shippingAddress'].value;
const shippingState: State = JSON.parse(JSON.stringify(purchase.shippingAddress.state));
const shippingCountry: Country = JSON.parse(JSON.stringify(purchase.shippingAddress.country));
purchase.shippingAddress.state = shippingState.name;
purchase.shippingAddress.country = shippingCountry.name;
The code snippet below throws an error Cannot find name 'JSON'.ts(2304):
const shippingState: State = JSON.parse(JSON.stringify(purchase.shippingAddress.state));
const shippingCountry: Country = JSON.parse(JSON.stringify(purchase.shippingAddress.country));
I suspect the issue may stem from my configuration in tsconfig.json:
"compilerOptions": {
...
"target": "es2017",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
}
I attempted changing es2018 to es5 without resolving the issue. Is there a solution within the realm of es2018? Any advice on how to rectify this matter would be appreciated.