新手如何用Node.js实现本地CSV列数据去重填充网页下拉筛选器

Hey there! I totally get where you're coming from—jumping into Node.js and APIs when you're only comfortable with HTML/CSS can feel overwhelming, but let's take this one step at a time. I'll walk you through every part with simple, actionable steps that don't require any prior Node.js experience.

1. First, Install Node.js #

Since you've never used Node.js before, the first thing you need to do is get it set up:

• Search for "Node.js LTS download" and grab the installer for your operating system (Windows, Mac, or Linux)
• Run the installer and keep all default settings—they’re perfect for beginners
• To confirm it worked, open your computer’s terminal (Command Prompt on Windows, Terminal on Mac/Linux) and type these commands:

  node -v
  npm -v
  

  You should see version numbers pop up—if you do, you’re ready to move on!

2. Set Up Your Project Folder #

Let’s create a dedicated space for this project to keep things organized:

• Make a new folder on your computer (name it something like csv-dropdown-project)
• Use the terminal to navigate into this folder with the cd command (e.g., cd Documents/csv-dropdown-project)
• Run this command to initialize a Node.js project (it creates a package.json file to track your tools):

  npm init -y
  

  The -y skips all the setup questions and uses default settings—no need to overthink it.

3. Install Required Tools (Dependencies) #

We need two simple packages to make this work:

• express: A lightweight tool to create our API server
• csv-parser: A tool to read and process your CSV file

Install both by running this command in your terminal:

npm install express csv-parser

4. Write Your API Code #

Now let’s build the server that will read your CSV and return unique values from the column you want.

• Inside your project folder, create a new file named server.js
• Copy and paste this code, then adjust the parts marked with comments to match your CSV:

const express = require('express');
const csv = require('csv-parser');
const fs = require('fs');
const app = express();
const PORT = 3000;

// Replace with the EXACT name of the column you want to extract (capitalization matters!)
const TARGET_COLUMN = 'your-column-name';
// Replace with the path to your CSV file (if it's in the project folder, just use the filename)
const CSV_FILE_PATH = 'data.csv';

// API endpoint that returns unique values from your target column
app.get('/filter-options', (req, res) => {
  const uniqueValues = new Set(); // Sets automatically remove duplicates

  fs.createReadStream(CSV_FILE_PATH)
    .pipe(csv())
    .on('data', (row) => {
      // Add the value from the target column to our Set (trim removes extra spaces)
      if (row[TARGET_COLUMN]) {
        uniqueValues.add(row[TARGET_COLUMN].trim());
      }
    })
    .on('end', () => {
      // Convert the Set to an array and send it as JSON
      res.json(Array.from(uniqueValues));
    })
    .on('error', (err) => {
      res.status(500).json({ error: 'Failed to read CSV file: ' + err.message });
    });
});

// Optional: Serve your HTML/CSS files directly from the server (fixes cross-origin errors)
// Create a 'public' folder in your project and move your HTML/CSS files inside it
app.use(express.static('public'));

// Start the server
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

5. Test Your API #

Let’s make sure the server works before connecting it to your frontend:

• Place your CSV file in the project folder (or update the path in server.js if it’s elsewhere)
• Run the server by typing this in your terminal:

  node server.js
  

• Open your browser and go to http://localhost:3000/filter-options
• You should see a list of unique values from your target column (in JSON format). If you do, great! If not, check the terminal for error messages (it might say the CSV file wasn’t found or the column name is wrong).

6. Connect the API to Your Frontend Dropdown #

Now let’s update your HTML to fetch the data and populate the dropdown. Add this code to your existing HTML file:

<select id="filterDropdown"></select>

<script>
// Wait for the page to load before fetching data
document.addEventListener('DOMContentLoaded', () => {
  const dropdown = document.getElementById('filterDropdown');

  // Fetch data from our API
  fetch('http://localhost:3000/filter-options')
    .then(response => response.json())
    .then(options => {
      // Add each unique value as a dropdown option
      options.forEach(optionText => {
        const option = document.createElement('option');
        option.value = optionText;
        option.textContent = optionText;
        dropdown.appendChild(option);
      });
    })
    .catch(err => {
      console.error('Error loading filter options:', err);
      alert('Failed to load filter options. Make sure the server is running!');
    });
});
</script>

Fixing Cross-Origin Errors #

If you were opening your HTML file directly from your computer (like file:///C:/...), you might get a "cross-origin" error. To fix this:

• Create a public folder in your project
• Move your HTML and CSS files into this folder
• Restart the server (stop it with Ctrl+C in the terminal, then run node server.js again)
• Open your browser to http://localhost:3000—your page will load from the server, and the fetch will work without issues.

Troubleshooting Tips #

• Empty list returned? Double-check your column name matches exactly (capitalization and spacing matter!) and that your CSV has data in that column.
• Server won’t start? Make sure you’re in the correct folder in the terminal and ran npm install to install dependencies.
• File not found error? Verify the CSV file path in server.js is correct (use the full path if it’s not in the project folder, like C:/Documents/my-data.csv).

You’ve got this! Take it one step at a time, test each part as you go, and don’t hesitate to tweak things if something doesn’t work right away.

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