How to implement nested loop using map in react Js

Question

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?

@RamKrish2079 Thankyou for your response, When I remove the brackets as you say, the `unexpected token, expected ","` error is gone but still I can't get the `cost.value` from the JSON, just for information, it appears in `console.log` — Rakis Friski, Nov 30 '19 at 15:19
considering `shipmentFees` is the JSON you provided it should work — ramki, Nov 30 '19 at 15:25

tareq aziz · Accepted Answer · 2019-11-30T15:59:21.460

1

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

edited Nov 30 '19 at 15:59

answered Nov 30 '19 at 15:31

tareq aziz

749
4
11

After I tried this it works, I must tweek my code a little bit but it works when I follow your step slowly with some trial and error thank you – Rakis Friski Nov 30 '19 at 16:05
Glad to here that my solution helps you – tareq aziz Nov 30 '19 at 16:08
but I want to ask one thing, do you know how to get `event.target.value` from a nested loop? – Rakis Friski Nov 30 '19 at 16:19
event.target.value is not a part of nested loop. Let say you have a button `` and handler method `handleChange=(event)=>{...}`, once you try to change that text box it will fire and you will get the event.target.value – tareq aziz Nov 30 '19 at 16:23

How to implement nested loop using map in react Js

1 Answers1