Javascript best way to filter out empty values and simplify reusable function

Question

Hello I have this function that takes array of objects and takes a specific value from the object and creates array of strings that can make mapped to dropdown selector.

const value = {
  Value: [{
      "Activity Id": "04912309-35",
      "Activity Name": "SCAFFOLD SUPPORT TEAM - CARPENTERS & LABORERS",
      "Start Date ": "2021-06-29 08:45:21",
      "End Date": "2021-06-30 08:45:21",
      "Work Group Name": "PSCF",
      "Unit ": "01",
      Status: "READY",
      crew: "FIN",
      "Work Pln Factor": "F2 EN RS NR",
    },
    {
      "Activity Id": "RHR*SWPUMPDSCHSTOP*Z",
      "Activity Name": "MM 1E12-F332D CLEAN UP AFTER  DISASSEMBLE/INSPECT/REPAIR VALVE",
      "Start Date ": "2021-06-29 08:45:21",
      "End Date": "2021-07-09 08:45:21",
      "Work Group Name": "PME1",
      "Unit ": "02",
      Status: "WORKING",
      crew: "FIN",
      "Work Pln Factor": "F1 RM L2 NR",
    },
    {
      "Activity Id": "01322927-01B",
      "Activity Name": "2DG024 WALK C/O, DISASSEMBLE VALVE",
      "Start Date ": "2021-06-29 08:45:21",
      "End Date": "2021-06-29 16:45:21",
      "Work Group Name": "ES MM",
      "Unit ": "02",
      Status: "H/APPR",
      crew: "FIN",
      "Work Pln Factor": "F2 WE RS NR L1 HS",
    },
    {
      "Activity Id": "01881463-01Z",
      "Activity Name": "MM 2CP40MD CLEAN UP AFTER REPLACE FILTER ELEMENT",
      "Start Date ": "2021-06-29 08:45:21",
      "End Date": "2021-06-29 20:45:21",
      "Work Group Name": "PME1",
      "Unit ": "01",
      Status: "PLAN",
      crew: "",
      "Work Pln Factor": "F2 EN RS NR",
    },
    {
      "Activity Id": "DG*VLV*BRIDGES*BN",
      "Activity Name": "MM 2E22-S001 FILL ENGINE OIL",
      "Start Date ": "2021-06-29 08:45:21",
      "End Date": "2021-06-29 14:45:21",
      "Work Group Name": "MM",
      "Unit ": "01",
      Status: "",
      crew: "",
      "Work Pln Factor": "RM",
    },
    {
      "Activity Id": "04912309-3434",
      "Activity Name": "MM 2E22-S001 FILL ENGINE OIL zzzz",
      "Start Date ": "2021-06-29 08:45:21",
      "End Date": "2021-06-29 08:45:21",
      "Work Group Name": "PSCF",
      "Unit ": "01",
      Status: "",
      crew: "",
      "Work Pln Factor": "F2 WE RS NR L1 H",
    },
  ];
}


const dataFilterArray = (data, str) => {
  const value = _.uniqBy(data, str);
  let newValue = value.map((each) => {
    const data = each[str].split(' ');
    return _.uniqBy(data, str);
  });
  newValue.push(`Select All`);
  newValue = newValue.flat(1);
  return newValue.filter((each) => each.length !== 0);
};


console.log(dataFilterArray(value.Value, 'Work Group Name'))

console.log(dataFilterArray(data, 'crew'))

<script src="https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/lodash.js"></script>

I'm wondering if there's a way to simplify the dataFilterArray. I feel like they are shouldn't be a reason to use flat method. This function also handles filtering out empty values. I would also like to remove lodash if that's possible.

Answer 1

I think you do too much in one function. While yes, the function is relatively small, it isn't clear what it does when you look at it. Your naming is also generic and kind of misleading. For example dataFilterArray() actually returns the values that will be used in the dropdown.

By taking the above into account, I came up with the following code:

function allWordsForKey(arr, key) {
  const values = arr.map((each) => each[key].split(' '));
  return values.flat(1)
}

function findUniqueWordsForKey(arr, key) {
  const words = allWordsForKey(arr, key)
  let uniqueWords = _.uniq(words);

  return uniqueWords.filter((each) => each && each.length !== 0);
}

function makeDropdownFrom(arr) {
  arr.unshift(`Select All`);
  return arr
};

function makeDropdownOfUniqueWordsForKey(arr, key) {
    const uniqueWords = findUniqueWordsForKey(arr, key)
  
  return makeDropdownFrom(uniqueWords)
}

You use it like this:

console.log(makeDropdownOfUniqueWordsForKey(value.Value, 'Work Group Name'))

console.log(makeDropdownOfUniqueWordsForKey(value.Value, 'crew'))

While the makeDropdownFromList() seems like a bit of an overkill it could be technically reused if you will be creating dropdowns like this in multiple places.

Answer 2

What I want is a Set (a collection of unique elements).

const dataFilterArray = (data, str) => {
  let s = new Set();
  data.forEach(itm => {
    (itm[str] || '').split(' ').forEach(v => { 
      if(v.length !== 0) s.add(v); 
    });
  });
  return ['Select All'].concat([...s]);
};