求助：实现按性别筛选注册Russ数据的按钮功能

Alright, let's get your Russ gender filters working perfectly. First, let's make sure we have a solid foundation: you'll need to store all your fetched Russ data in a persistent variable (so we don't lose the original dataset when filtering), and a reusable function to render table rows from a dataset.

Step 1: Set Up Your Data Storage & Base Render Function #

First, add a variable to hold all raw Russ data (this should be updated every time you fetch fresh data from Firebase):

// Store all raw Russ data from Firebase (keep this updated!)
let allRussData = [];

// Example Firebase data fetch function (adjust to your DB setup)
function fetchRussFromFirebase() {
  // Replace with your actual Firebase reference
  const russDbRef = firebase.database().ref('registered-russ');
  
  // Listen for realtime updates (or use .once() for one-time fetch)
  russDbRef.on('value', (snapshot) => {
    // Convert Firebase's object-based data to an array for easier filtering
    allRussData = Object.values(snapshot.val() || {});
    // Render all data initially
    renderRussTable(allRussData);
  });
}

// Reusable table render function (adjust columns to match your HTML table)
function renderRussTable(data) {
  const tableBody = document.getElementById('russ-table-body'); // Use your actual tbody ID
  tableBody.innerHTML = ''; // Clear existing rows
  
  // Handle empty dataset case
  if (data.length === 0) {
    const emptyRow = document.createElement('tr');
    emptyRow.innerHTML = '<td colspan="3">Ingen Russ funnet med denne filteren</td>'; // Adjust colspan to match your columns
    tableBody.appendChild(emptyRow);
    return;
  }
  
  // Render each Russ entry
  data.forEach(russ => {
    const row = document.createElement('tr');
    // Replace these with your actual table columns (name, gender, activity, etc.)
    row.innerHTML = `
      <td>${russ.fulltNavn || 'Ukjent Navn'}</td>
      <td>${russ.kjoenn || 'Ukjent Kjønn'}</td>
      <td>${russ.aktivitet || 'Ingen Aktivitet'}</td>
    `;
    tableBody.appendChild(row);
  });
}

Step 2: Implement the Filter Functions #

Now wire up your button click functions with proper filtering logic. We'll use Array.filter() to narrow down the dataset based on gender:

// Show all registered Russ
function visAlleruss() {
  renderRussTable(allRussData);
}

// Show only male (Menn) Russ
function visMenn() {
  const filteredMenn = allRussData.filter(russ => {
    // Use optional chaining (?.) and toLowerCase() to handle edge cases (null/undefined values, capitalization differences)
    return russ.kjoenn?.toLowerCase() === 'menn';
  });
  renderRussTable(filteredMenn);
}

// Show only female (Kvinner) Russ
function visKvinner() {
  const filteredKvinner = allRussData.filter(russ => {
    return russ.kjoenn?.toLowerCase() === 'kvinner';
  });
  renderRussTable(filteredKvinner);
}

// Show only non-binary/unspecified (intetkjønn) Russ
function visIntetkjoenn() {
  const filteredIntetkjoenn = allRussData.filter(russ => {
    return russ.kjoenn?.toLowerCase() === 'intetkjoenn';
  });
  renderRussTable(filteredIntetkjoenn);
}

Quick Notes to Avoid Issues #

• Match Your Firebase Field Names: If your gender field in Firebase is named gender instead of kjoenn, update the references in the filter functions.
• HTML Button Binding: Double-check that your buttons are calling the correct functions, e.g.:

  <button onclick="visAlleruss()">Vis Alle Russ</button>
  <button onclick="visMenn()">Vis Kun Menn</button>
  <button onclick="visKvinner()">Vis Kun Kvinner</button>
  <button onclick="visIntetkjoenn()">Vis Kun Intetkjønn</button>
  

• Realtime Updates: Since we're using on('value') in the Firebase fetch, your filters will automatically work with the latest data whenever it's updated in the database.

内容的提问来源于stack exchange，提问作者Raahim Khan