校园项目：遍历toiletData数组搜索无结果问题求助

Hey there! Let's figure out why your search function isn't returning results and get it working smoothly for your campus toilet site. Here are the most common issues and fixes to try:

1. Mismatched Field Names Between Search Criteria and toiletData #

First, double-check that the keys in your search criteria object exactly match the property names in your toiletData entries. For example:

• If your toilet data has a property handicapAccess, your criteria object can't use hasHandicap (a typo or different naming will break the match).
• Add a console.log(searchCriteria) right after creating the object, and compare it to a sample entry from toiletData (e.g., console.log(toiletData[0])). Make sure every key in the criteria exists in the data entries.

2. Buggy Array Traversal & Removal Logic #

Manually removing elements from toiletData with splice() while looping is easy to mess up—you might skip entries when the array length changes mid-loop. Instead, use JavaScript's filter() method, which creates a new array of matching entries without modifying the original data (plus it's cleaner!):

function getMatchingToilets(searchCriteria) {
  return toiletData.filter(toilet => {
    // Check each criteria against the toilet entry
    for (const [key, value] of Object.entries(searchCriteria)) {
      // Skip empty/default criteria (e.g., "all" for gender)
      if (value === "all" || value === undefined || value === "") continue;
      
      // If any criteria doesn't match, exclude this toilet
      if (toilet[key] !== value) {
        return false;
      }
    }
    // All criteria matched—keep this toilet
    return true;
  });
}

Why this works better: #

• filter() handles the loop safely, so you won't miss entries.
• The original toiletData stays intact, which is useful if users want to reset their search.

3. Unhandled Empty/Default Criteria #

If users leave a search option unset (e.g., selecting "All Genders"), your criteria object might include values like "all" or undefined. You need to skip these in your filter logic—otherwise, the function will look for toilets where gender: "all" (which probably doesn't exist in your data). The code above already includes this check with continue.

4. Broken Event Binding or Input Value Retrieval #

Make sure your search button's click event is properly bound, and you're correctly pulling values from your input fields:

// Example setup for your search button
const searchBtn = document.getElementById("search-button");
const genderSelect = document.getElementById("gender-filter");
const handicapToggle = document.getElementById("handicap-access-toggle");

searchBtn.addEventListener("click", () => {
  // Build your criteria object correctly
  const searchCriteria = {
    gender: genderSelect.value,
    handicapAccess: handicapToggle.checked // Checkboxes use .checked, not .value!
  };
  
  // Get results and log them first to test
  const results = getMatchingToilets(searchCriteria);
  console.log("Search Results:", results); // Check if this has data
  
  // Then render results to your page
  renderResults(results);
});

Common mistakes here:

• Forgetting to add the event listener entirely.
• Using .value for checkboxes instead of .checked.
• Typos in element IDs (e.g., search-btn vs search-button).

5. Debug with Console Logs #

If you're still stuck, add logs at every step:

1. Log the searchCriteria to confirm it has the right values.
2. Log individual toilet entries and their comparison to criteria inside the filter() function to see why entries are being excluded.

内容的提问来源于stack exchange，提问作者Fredrik Haarde