Insights

ReactJS - Search and Filter Data Results

by Chance Smith

At Sodium Halogen, we’ve made several search fields, but thought it would be good to document an output. Here we go with just the Javascript part…

data + search + filtering data = awesome

const movies = [
  { title: "101 Dalmations", genre: "Disney, Dog", rating: "G" },
  { title: "102 Dalmations", genre: "Dog", rating: "G" },
  { title: "5 Children and It", genre: "SciFi", rating: "G" },
  { title: "Aladdin", genre: "Disney, Adventure", rating: "G" },
  { title: "All Dogs Go to Heaven", genre: "Dog", rating: "G" },
  { title: "Anastasia", genre: "Princess", rating: "G" },
  { title: "Aristocats", genre: "Disney, Animal", rating: "G" },
  {
    title: "Aussie and Teds Great Adventure",
    genre: "Adventure, Dog",
    rating: "G",
  },
  { title: "Babe", genre: "Drama, Animal", rating: "G" },
];

// Fuzzy Search >> source: https://stackoverflow.com/a/15252131/3979495
String.prototype.fuzzy = function (s) {
  var hay = this.toLowerCase(),
    i = 0,
    n = -1,
    l;
  s = s.toLowerCase();
  for (; (l = s[i++]); ) if (!~(n = hay.indexOf(l, n + 1))) return false;
  return true;
};

// state variable
const search = "Dsy";

const moviesFound = movies.filter((movie) =>
  Object.keys(movie)
    .map((key) => movie[key].fuzzy(search))
    .reduce((acc, bool) => (bool ? acc + 1 : acc))
);

console.log(moviesFound);

pen: https://codepen.io/chancesmith/pen/RdEeva?editors=1111