CODEWITHSUNDEEP
javascriptarraysreactjsfilter
Marko Zivanovic
Marko Zivanovic

Reputation: 63

Filter Array of Objects based on input field in React

Got in a rather troublesome situation I have an array of objects 

[
   {
     "title":"placeholder",
     "text":"placeholder"
   },
   {
     "title":"test",
     "text":"placeholder"
   },
   {
     "title":"javascript",
     "text":"placeholder"
   }
]

I am displaying them in a div,but thats not important I got an input field which users should type in title's and as they type the array should only show matching object. Inputing java would show the javascript titled object

I need to somehow change the array so it doesnt display anything but the entered title and if the input is empty shows the whole array

I am using React but i can only use hooks So i copy the json

var [arrayOfObjects, setArray] = useState(Json)

the Json is imported from a local file arrayOfNotes is the array that i need to change pointing out so its easier to understand

ty in advance

Upvotes: 6

Views: 14320

Answers (2)

dmigo
dmigo

Reputation: 3029

You didn't share your component so I'll assume you know how to get the input value and call the corresponding variable input, besides you have your original array, from your example I judge it is called Json.

Then you can filter your value as follows:

const [arrayOfObjects, setArray] = useState(Json);
const filteredArray = input ?
    originalArray.filter(item => item.title.includes(input) :
    originalArray;

So that later you can render the filteredArray as follows:

<ul>
  {filteredArray.map(item => (<li>{item.title}</li>))}
</ul>

Upvotes: 1

azium
azium

Reputation: 20634

The array filter method is what you're looking for.

Here's what your component might looks like.

const List = ({ data }) => {
  const [value, setValue] = useState('')

  return (
    <div>
      <input 
        type="text"
        value={value} 
        onChange={e => setValue(e.target.value)} 
      />

      {data
        .filter(item => {
          if (!value) return true
          if (item.title.includes(value) || item.text.includes(value)) {
            return true
          }
        })
        .map(item => (
          <div>
            <h1>{item.title}</h1>
            <p>{item.text}</p>
          </div>
        ))
      }
    </div>
  )
}

And you pass your json data to that component

<List data={Json} />

Here's a working example of the above code

Upvotes: 17

Related Questions