Creating Search on JSON data in React JS over multiple key values

We use search in all the projects where there is long list of data. In most cases we get JSON data from server APIs and database. In this article we will learn how to create a search component in React JS which can find text in JSON object over multiple keys and values.

JSON Data Object

This is the json data we are going to use –

const superHero = [
    {
      name: "Steve Rogers",
      title: "Captain America",
      weapon: "Shield",
      franchise: "Marvel"
    },
    {
      name: "Tony Stark",
      title: "Ironman",
      weapon: "Suit",
      franchise: "Marvel"
    },
    {
      name: "Thor",
      title: "Thor",
      weapon: "Hammer",
      franchise: "Marvel"
    },
    {
      name: "Natasha",
      title: "Black Widow",
      weapon: "Combat",
      franchise: "Marvel"
    },
    {
      name: "Dr. Banner",
      title: "Hulk",
      weapon: "Anger",
      franchise: "Marvel"
    },
    {
      name: "Dr. Strange",
      title: "Dr. Strange",
      weapon: "Magic",
      franchise: "Marvel"
    },
    {
      name: "Vision",
      title: "Vision",
      weapon: "Mind Stone",
      franchise: "Marvel"
    },
    {
      name: "Sam",
      title: "Falcon",
      weapon: "Suit",
      franchise: "Marvel"
    },
    {
      name: "Clark Kent",
      title: "Superman",
      weapon: "Eye Lasers",
      franchise: "DC"
    },
    {
      name: "Bruce Wayne",
      title: "Batman",
      weapon: "Technology",
      franchise: "DC"
    },
    {
      name: "Barry Allen",
      title: "Flash",
      weapon: "Speed",
      franchise: "DC"
    },
    {
      name: "Victor",
      title: "Cyborg",
      weapon: "Robotics",
      franchise: "DC"
    },
    {
      name: "Diana",
      title: "Wonder Woman",
      weapon: "Sword",
      franchise: "DC"
    },
    {
      name: "Arthur Curry",
      title: "Aquaman",
      weapon: "Trident",
      franchise: "DC"
    }
  ];

We can see that the data is consistent. There are number of objects in the array with same 4 keys. These keys are showing information related to a superhero in Marvel and DC.

Our goal is to search over this JSON data. We need to include all the values of objects.

The logic behind search is –

1. Define a temporary array to hold only matched objects.
2. Run a loop over each object of JSON and match search value with key-value pairs.
3. If there is a match, then put that object into temporary array.
4. Show the temporary array in a table.

Defining temporary array

The first step is to define a temporary array to hold matched objects –

const searchedObjects = []

Running loop over JSON object

After defining the array, we can run a loop over all the key-value pairs in JSON and put the matched objects in temporary array –

superHero.forEach((singleHeroObject, index) => {

  Object.values(singleHeroObject).every((onlyValues, valIndex) => {

    if(onlyValues.toLowerCase().includes(searchString.toLowerCase())){
      searchedObjects.push(singleHeroObject)
      return;
    }

  })

})

Complete Code

Here is the complete code for search –

import "./styles.css";
import React from "react";

export default function App() {
  const superHero = [
    {
      name: "Steve Rogers",
      title: "Captain America",
      weapon: "Shield",
      franchise: "Marvel"
    },
    {
      name: "Tony Stark",
      title: "Ironman",
      weapon: "Suit",
      franchise: "Marvel"
    },
    {
      name: "Thor",
      title: "Thor",
      weapon: "Hammer",
      franchise: "Marvel"
    },
    {
      name: "Natasha",
      title: "Black Widow",
      weapon: "Combat",
      franchise: "Marvel"
    },
    {
      name: "Dr. Banner",
      title: "Hulk",
      weapon: "Anger",
      franchise: "Marvel"
    },
    {
      name: "Dr. Strange",
      title: "Dr. Strange",
      weapon: "Magic",
      franchise: "Marvel"
    },
    {
      name: "Vision",
      title: "Vision",
      weapon: "Mind Stone",
      franchise: "Marvel"
    },
    {
      name: "Sam",
      title: "Falcon",
      weapon: "Suit",
      franchise: "Marvel"
    },
    {
      name: "Clark Kent",
      title: "Superman",
      weapon: "Eye Lasers",
      franchise: "DC"
    },
    {
      name: "Bruce Wayne",
      title: "Batman",
      weapon: "Technology",
      franchise: "DC"
    },
    {
      name: "Barry Allen",
      title: "Flash",
      weapon: "Speed",
      franchise: "DC"
    },
    {
      name: "Victor",
      title: "Cyborg",
      weapon: "Robotics",
      franchise: "DC"
    },
    {
      name: "Diana",
      title: "Wonder Woman",
      weapon: "Sword",
      franchise: "DC"
    },
    {
      name: "Arthur Curry",
      title: "Aquaman",
      weapon: "Trident",
      franchise: "DC"
    }
  ];

  const [searchedArray, setSearchedArray] = React.useState(superHero);
  const [searchString, setSearchString] = React.useState("");

  React.useEffect(() => {
    if(searchString.length === 0){
      setSearchedArray(superHero)
    } else {
      const searchedObjects = []
      superHero.forEach((singleHeroObject, index) => {
        Object.values(singleHeroObject).every((onlyValues, valIndex) => {
          if(onlyValues.toLowerCase().includes(searchString.toLowerCase())){
            searchedObjects.push(singleHeroObject)
            return;
          }
        })
      })
      setSearchedArray(searchedObjects) 
    }
  }, [searchString])

  return (
    <div className="App">
      <p>
        <input
          type="text"
          value={searchString}
          onChange={(e) => setSearchString(e.target.value)}
          placeholder="search here.."
        />
      </p>
      <pre>
        {JSON.stringify(searchedArray, null, '    ')}
      </pre>
    </div>
  );
}

    Tweet this to help others

Live Demo