CODEWITHSUNDEEP
javascriptarraysreactjs
drifterOcean19
drifterOcean19

Reputation: 392

Array - What's the best way to check a value exists in one of the array elements (React / JS)

So this is an example data array that I will get back from backend. There are a few use cases as shown below and I want to target based on the subscription values in the array.

Example: 1

const orgList = [
    { id: "1", orgName: "Organization 1", subscription: "free" },
    { id: "2", orgName: "Organization 2", subscription: "business" },
];

In the example 1 - when array comes back with this combination - there will be some styling and text to target the element with subscription: free to upgrade its subscription

Example 2:

const orgList = [
    { id: "1", orgName: "Organization 1a", subscription: "pro" },
    { id: "2", orgName: "Organization 2a", subscription: "business" },
];

Example 3:

const orgList = [
    { id: "1", orgName: "Organization 1b", subscription: "free" },
];

In the example 3 - when array comes back with only one element - there will be some styling and text to target the element say to upgrade its subscription

At the moment, I'm simply using map to go over the array that I get back like so: {orgList.map((org) => (...do something here)} but with this I'm a bit limited as I don't think this is the best way to handle the 3 use cases / examples above.

Another idea is too do something like this before mapping but this:

const freeSubAndBusinessSub = org.some(org => org.subscription === 'free' && org.subscription === "business")

but doesn't seem to work as it returns false and then I'm stuck and not sure how to proceed after..

So my question is what's the best way to approach this kind of array to target what do to with the elements based on their values?

Upvotes: 0

Views: 253

Answers (1)

ChrisG
ChrisG

Reputation: 2948

You mention that using .map() is limited, but you don't expand on it. Logically what it sounds like you want is a separate list for each type to act upon. You can accomplish this using .filter() or .reduce(), however, in this case .map() is your friend.

// Example 1
const free = orgList.filter(org => org.subscription === 'free');
const business = orgList.filter(org => org.subscription === 'business');
free.map(org => /* do free stuff */);
business.map(org => /* do business stuff */);

// Example 2
const subscriptions = orgList.reduce((all, cur) => {
  if (!all.hasOwnProperty(cur.subscription)) {
    all[cur.subscription] = [];
  }
  all[cur.subscription].push(cur);
  return all;
}, {});
subscriptions['free'].map(org => /* do free stuff */);
subscriptions['business'].map(org => /* do business stuff */);

// Example 3
orgList.map(org => {
  switch(org.subscription) {
    case 'free':
      /* do free stuff */
    break;
    case 'business':
      /* do business stuff */
    break;
  }
})

You'll notice that in all the examples, you still need to map on the individual orgs to perform your actions. Additionally, with the first two examples, you'll be touching each element more than once, which can be incredibly inefficient. With a single .map() solution, you touch each element of the list only once. If you feel that you do free stuff actions become unwieldy, you can separate them out in separate functions.

Upvotes: 1

Related Questions