Filtering by user role in js

Question

I have following code.

    export default function App() {
      const users = [
    { id: 34, name: "A", role: "pro" },
    { id: 43, name: "B", role: "customer" },
    { id: 35, name: "C", role: "pro" },
    { id: 55, name: "D", role: "pro" },
    { id: 67, name: "test", role: "pro" },
    { id: 543, name: "Jhon", role: "customer" }
     ];

     const customer = users.filter((u) => {
      return u.role === "customer";
     });

     const pro = users.filter((u) => {
    return u.role === "pro";
     });

    return (
    <div className="App">
      <Card role={"Customer"} count={customer.length} />
      <Card role={"Pro"} count={pro.length} />
    </div>
    );
    }

I am trying to filter users by their role and then I am showing the count of that role in Card component.

For every role I am writing filter function. That is working, but how can I improve my code for not repeating myself ?

Make a function that takes the role as argument and invokes `users.filter` with that? — UnholySheep, Jun 01 '22 at 12:07
or just get all the `roles` from the users array and iterate over it? `const userRoles = new Set(users.map(({role}) => role));` — pilchard, Jun 01 '22 at 12:11
no, I need to get count of all `pro` users and count of `costumer` users — someone, Jun 01 '22 at 12:16

score 2 · Accepted Answer · answered Jun 01 '22 at 12:23

Maybe you can try creating one function which filters users by their role and returns an array of a particular user by role, here I tried you can take look into this.

import Card from "./Card";
import "./styles.css";

export default function App() {
  const users = [
    { id: 34, name: "A", role: "pro" },
    { id: 43, name: "B", role: "customer" },
    { id: 35, name: "C", role: "pro" },
    { id: 55, name: "D", role: "pro" },
    { id: 67, name: "test", role: "pro" },
    { id: 543, name: "Jhon", role: "customer" }
  ];

  const customer = checkUserByRole('customer');

  const pro = checkUserByRole('pro');

  function checkUserByRole(role) {
    const filteredUser  = users.filter((user) => {
      return user.role === role;
    });
    return filteredUser;
  }
  return (
    <div className="App">
      <Card role={"Customer"} count={customer.length} />
      <Card role={"Pro"} count={pro.length} />
    </div>
  );
}

}

thanks...your code is much more cleaner and understandable ...it works for me — someone, Jun 01 '22 at 12:29
I'm glad to hear that it's working well for you, have a great day. — Chaitya Panchal, Jun 02 '22 at 03:26

score 1 · Answer 2 · answered Jun 01 '22 at 12:16

1

As @UnholySheep already mentioned in the comments, something like:

function getUsersByRole(users, role) {
  return users.filter((u) => u.role == role));
}

Which you can then call for each role you want.

You could alternatively even use some sort of groupBy function, like the one from another SO post: https://stackoverflow.com/a/34890276/15469537

let groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

And then simply call

let grouped = groupBy(users, 'role');
// returns {pro: Array(4), customer: Array(2)}

answered Jun 01 '22 at 12:16

fravolt

2,565
1
4
19

For the count, just return `.length` of the result in the above functions – fravolt Jun 01 '22 at 12:18
thanks... it works also , but Chaitya Panchal's code is much cleaner – someone Jun 01 '22 at 12:31

Filtering by user role in js

2 Answers2