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
– Rakis Friski, Commented Nov 30, 2019 at 15:19
considering shipmentFees is the JSON you provided it should work — ramki
– ramki, Commented Nov 30, 2019 at 15:25

tareq aziz · Accepted Answer · 2019-11-30 15:59:21Z

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, 2019 at 15:59

answered Nov 30, 2019 at 15:31

tareq aziz

7874 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rakis Friski Over a year ago

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

tareq aziz Over a year ago

Glad to here that my solution helps you

Rakis Friski Over a year ago

but I want to ask one thing, do you know how to get event.target.value from a nested loop?

tareq aziz Over a year ago

event.target.value is not a part of nested loop. Let say you have a button <input type="text" onChange={this.handleChange}/> and handler method handleChange=(event)=>{...}, once you try to change that text box it will fire and you will get the event.target.value

Collectives™ on Stack Overflow

How to implement nested loop using map in react Js

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related