Javascript Question posted in
A very good W3school tutorial can be found here.

JavaScript Filter with Includes

I’m trying my hand at building a React application that searches for characters found in NAME, DEPARTMENT, CAMPUS and TITLE. So, I have the application up and running but I see that "housekeeping" within DEPARTMENT doesn’t return any results.

DATA (CARDS would contain this data for the filter)

{
    "ROW_NUMBER": 1,
    "PIDM": 991,
    "NAME": "Elvis Presley",
    "PHONE": "999-999-9999",
    "EMAIL": "<a href=mailto:[email protected]>test<u002fa>",
    "CAMPUS": "Main 1",
    "DEPARTMENT": "Eng /Read /Frgn Lang/ IDS / Comm.",
    "JOBTITLE": null,
    "SEARCHTYPE": null,
    "SEARCHHEADER": null
  },
  {
    "ROW_NUMBER": 2,
    "PIDM": 992,
    "NAME": "James Dean",
    "PHONE": "999-999-9999",
    "EMAIL": "<a href=mailto:[email protected]>test<u002fa>",
    "CAMPUS": "Main 2",
    "DEPARTMENT": "Instructional Resources",
    "JOBTITLE": "Lead Librarian-Systems",
    "SEARCHTYPE": null,
    "SEARCHHEADER": null
  },
  {
    "ROW_NUMBER": 3,
    "PIDM": 993,
    "NAME": "Marilyn Monroe",
    "PHONE": "999-999-9999",
    "EMAIL": "<a href=mailto:[email protected]>test<u002fa>",
    "CAMPUS": "Main 3",
    "DEPARTMENT": "Housekeeping",
    "JOBTITLE": "Custodian",
    "SEARCHTYPE": null,
    "SEARCHHEADER": null
  }

FILTER (It’s possible that CAMPUS or JOBTITLE could be null.)


const onChange = (event) => {

    if (!event.target.value) return setSearchResults(cards);

    const resultsArray = cards.filter((card) => (card.NAME.toLowerCase().includes(event.target.value.toLowerCase()) ||
                                                 card.DEPARTMENT.toLowerCase().includes(event.target.value.toLowerCase()) ||
                                                (!card.CAMPUS) ? card.NAME.toLowerCase().includes(event.target.value.toLowerCase()) : card.CAMPUS.toLowerCase().includes(event.target.value.toLowerCase()) ||
                                                (!card.JOBTITLE) ? card.NAME.toLowerCase().includes(event.target.value.toLowerCase()) : card.JOBTITLE.toLowerCase().includes(event.target.value.toLowerCase()))
    );


    setSearchResults(resultsArray)

  }

SEARCH


<input id='SearchText' type="text" onChange={onChange} className={`form-control ${utilStyles.inputField} ${utilStyles.inputPadding}`} name="SearchText" placeholder="Search Last Name; First Name; Campus; Deparment....." />

So, what am I doing wrong?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok, it seems like I got this to work.

    Solution:

    Wrap the CAMPUS and JOBTITLE statements in "( )".

    Current statement: (!card.CAMPUS) ? card.NAME.toLowerCase().includes(event.target.value.toLowerCase()) : card.CAMPUS.toLowerCase().includes(event.target.value.toLowerCase())

    Change statement to: ( (!card.CAMPUS) ? card.NAME.toLowerCase().includes(event.target.value.toLowerCase()) : card.CAMPUS.toLowerCase().includes(event.target.value.toLowerCase()) )

    Wrapping the statements within "( )" has appeared to correct the issue.


  2. 0

    You can filter the records using a list of know fields combined with an Array.prototype.some call.

    const main = () => {
  const fields = ['NAME', 'CAMPUS', 'DEPARTMENT', 'JOBTITLE'];
  const query = 'housekeeping';
  const filterd = filterData(data, fields, query);
  console.log(filterd);
};

const filterData = (data, fields, query) => {
  const term = query.toLowerCase();
  return data.filter(record =>
    fields.some(field => record[field]?.toLowerCase().includes(term)));
};

const data = [{
  "ROW_NUMBER": 1,
  "PIDM": 991,
  "NAME": "Elvis Presley",
  "PHONE": "999-999-9999",
  "EMAIL": "<a href=mailto:[email protected]>test<u002fa>",
  "CAMPUS": "Main 1",
  "DEPARTMENT": "Eng /Read /Frgn Lang/ IDS / Comm.",
  "JOBTITLE": null,
  "SEARCHTYPE": null,
  "SEARCHHEADER": null
}, {
  "ROW_NUMBER": 2,
  "PIDM": 992,
  "NAME": "James Dean",
  "PHONE": "999-999-9999",
  "EMAIL": "<a href=mailto:[email protected]>test<u002fa>",
  "CAMPUS": "Main 2",
  "DEPARTMENT": "Instructional Resources",
  "JOBTITLE": "Lead Librarian-Systems",
  "SEARCHTYPE": null,
  "SEARCHHEADER": null
}, {
  "ROW_NUMBER": 3,
  "PIDM": 993,
  "NAME": "Marilyn Monroe",
  "PHONE": "999-999-9999",
  "EMAIL": "<a href=mailto:[email protected]>test<u002fa>",
  "CAMPUS": "Main 3",
  "DEPARTMENT": "Housekeeping",
  "JOBTITLE": "Custodian",
  "SEARCHTYPE": null,
  "SEARCHHEADER": null
}];

main();
    .as-console-wrapper { top: 0; max-height: 100% !important; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search