How do I iterate though an array of objects with keys and values in react and render them in the JSX( Both keys and Values)

Question

The below code gives me the grouped data as shown in the image. When I iterate through it and log the result to the console, I get the data but get blank html table when iterating the same way as I did to log the data in the console.

Here's how I'm grouping the data:

const finalGroup = sortedOrderItems && _.groupBy(sortedOrderItems, "deliveryDate");

let result = _.map(_.values(finalGroup), arr => _.groupBy(arr, 'deliveryDate'))

console.log("final grouping:",result)

 let tableData =     
     
        result && result.map(res=>{

                        Object.keys(res).map((key, index) => {   

                          <TableRow style={{backgroundColor:'#E6E6FA', textAlign:'center'}}>
                                  <TableCell colSpan={9} style={{backgroundColor:'#E6E6FA'}}>{key}</TableCell>
                          </TableRow>      
      
                      res &&  res[key].map((object) => {  

                                      return      <TableRow style={{backgroundColor:'#FAFAFA', textAlign:'center'}}>
                                            <TableCell style={{fontSize:'17px'}}> <img src={object.product.productImage} style={{border:'1px solid #DEDBDB',height:'50px',marginTop:'1px', marginLeft:'2px', width:'50px'}} alt={object.name} /></TableCell>
                                            <TableCell ><div style={{ wordWrap:'break-all'}}>{MOMENT(object.deliveryDate).tz(timeZone).format('YYYY-MM-DD, h:mm A')}</div></TableCell>
                          
                                            <TableCell ><div style={{width:'200px', wordWrap:'break-all'}}>{object.name}</div></TableCell>
        
                                            <TableCell><span style={{marginLeft:'-40px'}}>{object.unitName}</span></TableCell>
                                            <TableCell><span style={object.status == 'BACK_ORDER' ||  object.status == 'UNAVAILABLE' || object.status == 'OUT_OF_STOCK' ? {color:'red',marginLeft:'-35px'} : {color:'green', marginLeft:'-35px'} }>{object.status}</span></TableCell>
                                            <TableCell><span style={{textAlign:'center'}}>{regionID && regionID == 1050 ? <span>&#36;</span> : regionID && regionID == 1000 ? <span>&#x20b9;</span>: ''}{object.unitPrice}</span></TableCell>
                                            <TableCell><span style={{textAlign:'center'}}>{regionID && regionID == 1050 ? <span>&#36;</span> : regionID && regionID == 1000 ? <span>&#x20b9;</span>: ''}{object.totalPrice}</span></TableCell>
                                            <TableCell><span style={{}}>{object.quantity}</span></TableCell>                                                        
                                        
                                          <TableCell>
                                            <div style={{float:'right', marginLeft:'-65px'}}>
                                                <FormControl variant="outlined" style={{width:'202px', float:'right'}}>
                                                    <InputLabel id="status">Update Item Status</InputLabel>
                                                    <Select
                                                      style={{height:'44px',textAlign:'center', margin:'7px'}}
                                                      native
                                                      id= 'status'
                                                      value={OrderItemStatus.status}
                                                      onChange={(event, id)=>{handleStatusChange(event, object.id)}}
                                                      label="Update Order Status"
                                                                                            
                                                    >
                                                    <option aria-label="None" value="" />
                                                    {statuses.map((stat, index)=>{
                                                        return(<option id={index} key={index} value={stat}>{stat}</option>
                                                        )
                                                    })}
                                                    </Select>
                                                </FormControl>
                                              </div>
                                          </TableCell>
                                        
                                        </TableRow>
                                     
      
      
                          });
      
                  })
      
                      
        
         })

Any help would be greatly appreciated. Thank you!

I hope you did not forget to return tableData.

Snehasish Karmakar
– Snehasish Karmakar

2021-08-24 05:59:08 +00:00
Commented Aug 24, 2021 at 5:59 — Snehasish Karmakar
– Snehasish Karmakar, Commented Aug 24, 2021 at 5:59

Drew Reese · Accepted Answer · 2021-08-24 06:00:52Z

2

It seems you have an array of objects where each object is a collection of key-value pairs where the values are the nested arrays you want to map. Don't forget to return the JSX you are mapping.

const tableData = result && result.map(res=> {
  return Object.entries(res).map(([key, value], index) => {
    return (
      <Fragment key={key}>
        <TableRow style={{backgroundColor:'#E6E6FA', textAlign:'center'}}>
          <TableCell colSpan={9} style={{backgroundColor:'#E6E6FA'}}>{key}</TableCell>
        </TableRow>
        {value.map((object) => {
          return (
            <TableRow style={{backgroundColor:'#FAFAFA', textAlign:'center'}}>
              ...
            </TableRow>
          );
        })}
      </Fragment>
    );
  })
})

answered Aug 24, 2021 at 6:00

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

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

1 Comment

MrStack Over a year ago

wow!! Thank you very much @Drew Reese . You are a life saver.. Appreciated a lot. This is exactly what I needed.

Collectives™ on Stack Overflow

How do I iterate though an array of objects with keys and values in react and render them in the JSX( Both keys and Values)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related