3
\$\begingroup\$

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.

\$\endgroup\$
0

2 Answers 2

2
\$\begingroup\$

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.

\$\endgroup\$
1
\$\begingroup\$

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]);
};
\$\endgroup\$
1
  • \$\begingroup\$ While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. \$\endgroup\$
    – Ghost
    Jun 29, 2021 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.