Applying multiple filters to an array javascript

Question

I'm having trouble applying and using two filters to an array. I have an array of files which two attributes: a filename and a file extension. Those files are displayed in a list in a view. There are two options for filtering the list -- with a simple text filter and a select dropdown based on the file extension.

Everything works fine except the text filter does not work when the default "any" select option is chosen. When the user chooses one of the file extensions, then the user can filter that list using the text filter.

https://codesandbox.io/s/shy-glade-hum3x?file=/App.js

Basically the filter should:

Let the user switch between "all" and then any other extensions
Regardless of which extension is chosen (including "all"), user can filter that list by using the text filter.

I have a feeling it's purely an issue with how the .filter() is applied at the bottom of the component.

I've simplified the component and removed a bunch of logic to keep it simple. Many thanks in advance.

import React from "react";
import "./styles.css";
import { useState } from "react";

export default function App() {
  const [filenameFilterString, setfilenameFilterString] = useState("");
  const [selectedExtension, setselectedExtension] = useState("all");

  const handleKeyPress = (event) => {
    if (event.keyCode === 27 || event.target.value === "") {
      event.target.value = "";
    }
    setfilenameFilterString(event.target.value);
  };

  const anArray = [
    {
      filename: "A graet first filename",
      extension: ".ppt"
    },
    {
      filename: "A second filename",
      extension: ".doc"
    },
    {
      filename: "A third filename",
      extension: ".xls"
    },
    {
      filename: "A fourth filename",
      extension: ".xls"
    }
  ];

  const getListOfUniqueExtensions = () => {
    const extensionList = anArray.map((file) => {
      return file.extension;
    });
    return [...new Set(extensionList)];
  };

  const handleFileExtensionChange = (event) => {
    event.preventDefault();
    setselectedExtension(event.target.value);
  };

  return (
    <div className="App">
      <div className="container">
        {/* File Extensions Filter */}
        <select
          onChange={(e) => handleFileExtensionChange(e)}
          value={selectedExtension}
        >
          <option value="all">All</option>
          {getListOfUniqueExtensions().map((ext) => {
            return <option value={ext}>{ext}</option>;
          })}
        </select>

        {/* Text filter */}
        <input type="text" onKeyUp={(event) => handleKeyPress(event)}></input>

        {anArray
          .filter((file) =>
            selectedExtension === "all"
              ? file.extension.includes("")
              : file.extension.includes(selectedExtension) &&
                file.filename.toLowerCase().includes(filenameFilterString)
          )
          .map((file) => {
            return <div>{file.filename}</div>;
          })}
      </div>
    </div>
  );
}

Instead of a ternary operation, you could go with boolean logic: (selectedExtension === 'all') || (file.extension.includes(selectedExtension) && file.filename.toLowerCase().includes(filenameFilterString)) — PotatoParser
– PotatoParser, Commented Nov 15, 2020 at 22:20
replace file.extension.includes("") by file.filename.toLowerCase().includes(filenameFilterString) — MWO
– MWO, Commented Nov 15, 2020 at 23:22

Ketan Ramteke · Accepted Answer · 2020-11-15 23:37:11Z

2

import React from "react";
import "./styles.css";
import { useState } from "react";

export default function App() {
  const [filenameFilterString, setfilenameFilterString] = useState("");
  const [selectedExtension, setselectedExtension] = useState("all");

  const handleKeyPress = (event) => {
    let input = event.target.value;
    setfilenameFilterString(input.toLowerCase());
  };

  const anArray = [
    {
      filename: "A graet first filename",
      extension: ".ppt"
    },
    {
      filename: "A second filename",
      extension: ".doc"
    },
    {
      filename: "A third filename",
      extension: ".xls"
    },
    {
      filename: "A fourth filename",
      extension: ".xls"
    }
  ];

  const getListOfUniqueExtensions = () => {
    const extensionList = anArray.map((file) => {
      return file.extension;
    });
    return [...new Set(extensionList)];
  };

  const handleFileExtensionChange = (event) => {
    event.preventDefault();
    setselectedExtension(event.target.value);
  };

  return (
    <div className="App">
      <div className="container">
        {/* File Extensions Filter */}
        <select
          onChange={(e) => handleFileExtensionChange(e)}
          value={selectedExtension}
        >
          <option value="all">All</option>
          {getListOfUniqueExtensions().map((ext) => {
            return <option value={ext}>{ext}</option>;
          })}
        </select>

        {/* Text filter */}
        <input type="text" onKeyUp={(event) => handleKeyPress(event)}></input>

        {anArray
          .filter((file) =>
            selectedExtension === "all"
              ? file.filename.toLowerCase().includes(filenameFilterString)
              : file.extension.includes(selectedExtension) &&
                file.filename.toLowerCase().includes(filenameFilterString)
          )
          .map((file) => {
            return <div>{file.filename}</div>;
          })}
      </div>
    </div>
  );
}

Live Demo: Codesandbox

edited Nov 15, 2020 at 23:37

answered Nov 15, 2020 at 22:33

Ketan Ramteke

10.7k2 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vlad L Over a year ago

This doesn't work. If you type something, then the extension flips back to All.

Ketan Ramteke Over a year ago

I think OP is trying to search the entire file list regardless of file extension when search text is provided, that's why I am resetting the extension to all

Vlad L · Accepted Answer · 2020-11-15 23:18:30Z

I think this is sufficient

        {anArray
          .filter((file) =>
            selectedExtension === "all"
              ? file.filename.toLowerCase().includes(filenameFilterString)
              : file.extension.includes(selectedExtension) &&
                file.filename.toLowerCase().includes(filenameFilterString)
          )
          .map((file) => {
            return <div>{file.filename}</div>;
          })}

You could also remove the duplication by using 2 chained filters:

        {anArray
          .filter((file) =>
            selectedExtension === "all"
              ? true
              : file.extension.includes(selectedExtension)
          )
          .filter(file => file.filename.toLowerCase().includes(filenameFilterString))
          .map((file) => {
            return <div>{file.filename}</div>;
          })}

Collectives™ on Stack Overflow

Applying multiple filters to an array javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related