JavaScript Searching - spinningideas/resources GitHub Wiki

JavaScript Searching

If you need to enable searching an array of JSON objects and you need to find some specific objects inside this array based on a value of one or more properties of the object below are some approaches that can be used.

Example Data

var data = [
    { id: 0, name: "Any Value", otherProp: 321 },
    { id: 1, name: "Big value", otherProp: 623},
    { id: 2, name: "Small Object", otherProp: 850 },
    { id: 3, name: "Smaller Value", otherProp: 33},
    { id: 4, name: "Last Obj 2", otherProp: 444 }
];

Simple Implementation (using single property "key")

function search(data, searchProp, searchValue) {
  let results = [];
  if (isNaN(searchValue)) {
    searchValue = searchValue ? searchValue.toString().toLowerCase() : "";
  }
  for (var i = 0, dl=data.length; i < dl; i++) {
    if (
      data[i][searchProp] &&
      data[i][searchProp]
        .toString()
        .toLowerCase()
        .indexOf(searchValue) > -1
    ) {
      results.push(data[i]);
    }
  }
  return results;
}

Usage

let results = search(data, "id", 3);

OR

let results = search(data, "name", "Obj");

https://codesandbox.io/embed/eager-babbage-t8qg0?fontsize=14&hidenavigation=1&theme=dark

More Advanced Implementation (Pagination and Search Multiple Props)

The implementation below uses array of searchable property "keys" and paginates the results

function searchAndPaginate(
  searchValue,
  searchProps,
  data,
  pageNumber,
  pageSize
) {
  pageNumber = Math.abs(parseInt(pageNumber));
  pageNumber = pageNumber > 0 ? pageNumber - 1 : pageNumber;
  pageSize = parseInt(pageSize);
  pageSize = pageSize < 1 ? 1 : pageSize;
  searchValue = searchValue.toLowerCase();

  let results = [];
  if (data && data.length) {
    for (let i = 0, l = data.length; i < l; i++) {
      for (let p = 0, lp = searchProps.length; p < lp; p++) {
        let searchProp = searchProps[p];
        let dataSearchVal = data[i][searchProp];
        if (dataSearchVal && dataSearchVal.length > 0) {
          dataSearchVal = dataSearchVal.toLowerCase();
          if (dataSearchVal.indexOf(searchValue) > -1) {
            results.push(data[i]);
          }
        }
      }
    }
    // paginate
    return [
      ...results.filter((value, n) => {
        return n >= pageNumber * pageSize && n < (pageNumber + 1) * pageSize;
      })
    ];
  } else {
    return results;
  }
}

Usage

let results = searchAndPaginate (data, ["name"], "Small", 1, 10);

OR

let results = searchAndPaginate (data, ["name", "otherProp"], "2", 1, 10);

https://codesandbox.io/s/basicvanillajavascriptsearchpaginated-pjb6f

Even More Advanced Implementations