I am facing a challenge while trying to iterate through a complex object containing 'inner objects'. When using the map function, I can only access one level below. How can I utilize map and TypeScript to loop through multiple levels below? Whenever I attempt to use map for the second level, I encounter an error.
The JSON structure is as follows:
{
"PAYMENTS": [
{
"id": 1,
"userID": 1,
"month": "March 2015",
"details": {
"item1": {
"amount": "1000",
"date": "01/03/2015",
"id": 2
},
"item2": {
"amount": "2000",
"date": "03/03/2015",
"id": 3
}
}
},
{
"id": 2,
"userID": 1,
"month": "April 2015",
"details": {
"item1": {
"amount": "100",
"date": "01/04/2015",
"id": 1
}
}
}
]
}
I have defined two interfaces:
export interface IPaymentDetailEntity {
id: number;
date: Date;
amount: string;
}
export interface IPaymentEntity {
id:number;
month:string;
userID:number;
details:IPaymentDetailEntity[]
}
To iterate through the objects, I am attempting the following:
{payments.map(paymentDetails => (
<div key={paymentDetails.id}>
{paymentDetails.month} {paymentDetails.userID}
{/* This part is causing an issue */}
{paymentDetails.details.map(item => (
<div key={item.id}>
<span>{item.date}</span>
<span>{item.amount}</span>
</div>
))}