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

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

• javascript
• arrays
• reactjs
• filter

• 1 Welcome to stackoverflow! Have you gotten any further than this? Do you have state for your input text value? – azium Commented Nov 16, 2019 at 17:32
• well i have the whole thing done but this filter function, i can either either copy the input value into a variable with a simple a=docume.getelbyid().value, or i can set the input value into a state, i am ok with that,my problem maybe explained in a better way: for example having 2 objects with titles "javascript" and "javasssssscript", i can get it to show 1 of them by entering "javasc" or "javass" but if the user deletes the "s" from "javass" and gets "javas" i still have only 1 showing,cant get back the other 1 – Marko Zivanovic Commented Nov 16, 2019 at 17:41

2 Answers 2

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

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>