Reputation: 571
I know that there is a lot of thread that already answer about this nested loop using map in react js problem, but I'am quite confused as how can I implemented it in my code. I tried several time but got an an error,
this is some topic that I tried, but I can't seem to implement it:
this is my Json that I want to get:
"costs": [
{
"service": "CTC",
"description": "JNE City Courier",
"cost": [
{
"value": 234000,
"etd": "1-2",
"note": ""
}
]
},
{
"service": "CTCYES",
"description": "JNE City Courier",
"cost": [
{
"value": 468000,
"etd": "1-1",
"note": ""
}
]
}
]
What I want is to get the value from this JSON example, but still no luck
this is my component that I want to loop:
<MDBDropdown className="select-type">
<MDBDropdownToggle caret className="select-btn">
Choose Your Courier Service
</MDBDropdownToggle>
<MDBDropdownMenu basic onClick={this.serviceData}>
{shipmentFees != null ? shipmentFees.map(
shipmentFee => (
<MDBDropdownItem key={shipmentFee.cost.service} name={shipmentFee.cost.description + "," + shipmentFee.cost.etd} value={shipmentFee.cost.value}>
{shipmentFee.cost.description}, {shipmentFee.cost.etd} Days
</MDBDropdownItem>
)
)
:
<MDBDropdownItem value="-">There is no service</MDBDropdownItem>
}
</MDBDropdownMenu>
</MDBDropdown>
from reference number 3, I tried this solution but I got unexpected token, expected ","
<MDBDropdown className="select-type">
<MDBDropdownToggle caret className="select-btn">
Choose Your Courier Service
</MDBDropdownToggle>
<MDBDropdownMenu basic onClick={this.serviceData}>
{shipmentFees != null ? shipmentFees.map(
shipmentFee => (
{
shipmentFee.cost.map(
cost => (
<MDBDropdownItem key={cost.service} name={cost.description + "," + cost.etd} value={cost.value}>
{cost.description}, {cost.etd} Days
</MDBDropdownItem>
)
)}
)
)
:
<MDBDropdownItem value="-">There is no service</MDBDropdownItem>
}
</MDBDropdownMenu>
</MDBDropdown>
can someone help me to solve this?
Upvotes: 0
Views: 633
Reputation: 777
I just follow your 2nd block of code
1) I think your shipmentFee.cost.map(
should be shipmentFee.costs.map(
2) Next line cost => (
here cost
will give you service
, description
and cost[]
3) cost[]
as it is an array you have to do another map/loop to extract value
, etd
and note
. this value
is your expected value I think
Upvotes: 1