CODEWITHSUNDEEP
javascriptreactjsdictionarylodash
Daryl Wong
Daryl Wong

Reputation: 2443

ReactJS: Map through using groupby in lodash

I have the following where it will display items in a certain way.

import './App.css'
import _ from 'lodash'

const App = () => {
  const dataone = [
    { id: 1, month: 'jan', level: 8, clazz_id: '1A' },
    { id: 2, month: 'feb', level: 6, clazz_id: '1A' },
    { id: 3, month: 'jan', level: 2, clazz_id: '2B' },
    { id: 4, month: 'feb', level: 3, clazz_id: '2B' },
    { id: 5, month: 'mar', level: 5, clazz_id: '2B' },
  ]

  const data = _.groupBy(dataone, 'clazz_id')
  const entries = Object.entries(data)

  return (
    <div className='App'>
      {entries.map((item, index) => (
        <div>
          <h2>{item[0]}</h2>
          <h2>
            {item[1].map((e) => (
              <p>
                {e.month}
                {'--'}
                {e.level}
              </p>
            ))}
          </h2>
        </div>
      ))}
    </div>
  )
}

export default App

The above code will display the array of objects like below:

1A
jan-8
feb-6

2B
jan-2
feb-3
mar-5

This is what I want however the above code is done with lodash and object.entries and so I am looking for a better and clearner solution.

Upvotes: 1

Views: 1236

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Lodash, also has a .map method that can iterate over objects as well. So, you could use that for consistency.

const App = () => {
  const dataone = [
    { id: 1, month: 'jan', level: 8, clazz_id: '1A' },
    { id: 2, month: 'feb', level: 6, clazz_id: '1A' },
    { id: 3, month: 'jan', level: 2, clazz_id: '2B' },
    { id: 4, month: 'feb', level: 3, clazz_id: '2B' },
    { id: 5, month: 'mar', level: 5, clazz_id: '2B' },
  ]

  const data = _.groupBy(dataone, 'clazz_id')

  return (
    <div className='App'>
      {_.map(data,(value, key) => (
        <div>
          <h2>{key}</h2>
          <h2>
            {value.map((e) => (
              <p>
                {e.month}
                {'--'}
                {e.level}
              </p>
            ))}
          </h2>
        </div>
      ))}
    </div>
  )
}


ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div id="root"></div>

Upvotes: 1

brk
brk

Reputation: 50291

You can use reduce to group by the data in the required format

export default function App() {
  const dataone = [
    { id: 1, month: 'jan', level: 8, clazz_id: '1A' },
    { id: 2, month: 'feb', level: 6, clazz_id: '1A' },
    { id: 3, month: 'jan', level: 2, clazz_id: '2B' },
    { id: 4, month: 'feb', level: 3, clazz_id: '2B' },
    { id: 5, month: 'mar', level: 5, clazz_id: '2B' },
  ];
  function groupByClass(arr) {
    return arr.reduce((acc, curr) => {
      if (!acc[curr.clazz_id]) {
        acc[curr.clazz_id] = {
          classId: curr.clazz_id,
          level: [`${curr.month}-${curr.level}`],
        };
      } else {
        acc[curr.clazz_id].level.push(`${curr.month}-${curr.level}`);
      }
      return acc;
    }, {});
  }

  const groupedData = groupByClass(dataone);
  console.log(groupedData);
  return (
    <div className="App">
      {Object.keys(groupedData).map((item) => {
        return (
          <div>
            <div>{groupedData[item].classId}</div>
            {groupedData[item].level.map((elem) => {
              return <p>{elem}</p>;
            })}
          </div>
        );
      })}
    </div>
  );
}

Demo here

Upvotes: 1

Amila Senadheera
Amila Senadheera

Reputation: 13245

This is achievable using only the Javascript builtins (Array.reduce, Array.map, and Object.entries). Better to avoid using lodash as it will add up to the bundle size of your web app and make the app slower when loading.

I would do it like below.

const App = () => {
  const dataone = [
    { id: 1, month: "jan", level: 8, clazz_id: "1A" },
    { id: 2, month: "feb", level: 6, clazz_id: "1A" },
    { id: 3, month: "jan", level: 2, clazz_id: "2B" },
    { id: 4, month: "feb", level: 3, clazz_id: "2B" },
    { id: 5, month: "mar", level: 5, clazz_id: "2B" }
  ];

  return (
    <div className="App">
      {Object.entries(
        dataone.reduce((prev, curr) => {
          prev[curr.clazz_id]
            ? prev[curr.clazz_id].push(curr)
            : (prev[curr.clazz_id] = [curr]);
          return prev;
        }, {})
      ).map(([key, value]) => {
        return (
          <div>
            <h2>{key}</h2>
            <h2>
              {value.map(({ level, month }) => (
                <p>
                  {month}
                  {"--"}
                  {level}
                </p>
              ))}
            </h2>
          </div>
        );
      })}
    </div>
  );
};

ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 1

Related Questions