Filter and Summarize

Category Options

Build a Filter List

A browser table derives unique category names from CSV records so a filter select can show one option per category.

Program

CSV rows often repeat values. The browser can derive a short option list from those repeated values without changing the source records.

category_options.html
Visuals: captured from real browser rendering
<script>
  const records = [
    { item: "Tea", category: "pantry" },
    { item: "Tape", category: "office" },
    { item: "Rice", category: "pantry" }
  ];
  const categories = records.map(row => row.category);
  const unique = [...new Set(categories)];
  renderSelect(unique);
</script>

  1. Start with three item records.

    The source table has Tea, Tape, and Rice records with repeated categories.
    The option list starts from the full record set.

  2. Read one category from each record.

    The category column is extracted into a pantry, office, pantry list.
    map keeps the original rows and creates a derived category array.

  3. Remove repeated category names.

    The duplicate pantry value collapses into one pantry option.
    Set keeps one copy of each category.

  4. Spread the Set back into an array.

    The unique categories are ready as an array for rendering.
    The spread syntax turns the Set into data a renderer can map.

  5. Render the category filter options.

    A category filter select shows pantry and office options.
    The UI now offers one option for each category in the records.
map map creates a new array by reading one value from each row.
Set A Set keeps one copy of each value, which is useful for filter options.