how to groupby objects using lodash and map over the list -react

Question

I have checked with other answers but not able to figure out my problem. I have tried with many things but ended up with error while mapping. it is my main data list example .

conlocations = [{mruCode:"1700", division:"Agricultural",country:"USA",...},{mruCode:"1000",division:"Agricultural",country:"CANADA",...},{mruCode:"1500",division:"Industrial",country:"AUSTRALIA",...}]

now i want to group country based on division means for division:"Agricultural" country:{"USA","CANADA"}. then i have to map grouped list . How to do that? It might be similar question but not able to get the result.

i have tried so far but getting error while mapping.

component code

render(){
        const _labels = store.getLabels();
        const {conLocations} = this.props;
        const groups= _.groupBy(conLocations,'division');
        console.log(groups);
        return (
            <table>
                <tbody>
                    {this.props.groups.map(grp=>conLocations.filter(element=>grp.division.includes(element.division)).map((element,index)=>{
                        <tr key={index}>
                        <td>{_labels[element.division]}</td>
                        <td>{element.country}</td>
                        </tr>
                    }))}
                </tbody>
            </table>
        );
    }

In UI, user can see like this -> Agricultural - USA,CANADA

Krzysztof Krzeszewski · Accepted Answer · 2019-07-29 08:59:09Z

4

In lodash _.groupBy actually creates an object with grouping parameter as keys, so you have to treat it as an object

const conLocations = [{
  mruCode: "1700",
  division: "Agricultural",
  country: "USA"
}, {
  mruCode: "1000",
  division: "Agricultural",
  country: "CANADA"
}, {
  mruCode: "1500",
  division: "Industrial",
  country: "AUSTRALIA"
}];

const groups = _.groupBy(conLocations, 'division');

Object.entries(groups).map(([key, value])=>{
  console.log("key:", key, "\nvalue:", value)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

answered Jul 29, 2019 at 8:59

Krzysztof Krzeszewski

6,8382 gold badges23 silver badges33 bronze badges

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

Comments

Tien Duong · Accepted Answer · 2019-07-29 08:58:32Z

2

You just need to group by division then map the result to the format you want.

const groups = _(conLocations)
  .groupBy('division')
  .map((locations, division) => {
    const country = locations.map(location => location.country);
    return ({
      division,
      country,
    })
  })
  .value();

Above code will return the result in this format

[  
   {  
      division:'Agricultural',
      country:[  
         'USA',
         'CANADA'
      ]
   },
   {  
      division:'Industrial',
      country:[  
         'AUSTRALIA'
      ]
   }
]

answered Jul 29, 2019 at 8:58

Tien Duong

2,6051 gold badge12 silver badges30 bronze badges

2 Comments

learningMonk Over a year ago

It is working as a charm. I just need one more help. How to do those countries comma seperated in UI( e.g: Agricutural - USA,CANADA)

Tien Duong Over a year ago

You can use join on country array. such as <td>{element.country.join(',')}</td>

Collectives™ on Stack Overflow

how to groupby objects using lodash and map over the list -react

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related