In react I have an object which looks like

{
 {name: 'Colombia', code: 'CO'},
 {name: 'Comoros', code: 'KM'},
 {name: 'Congo', code: 'CG'},
...}

I need to search there for element which a user is typing(I am getting it from an input field). After every letter written by a user, I need to pare it with all names and find all names with that part

In react I have an object which looks like

{
 {name: 'Colombia', code: 'CO'},
 {name: 'Comoros', code: 'KM'},
 {name: 'Congo', code: 'CG'},
...}

I need to search there for element which a user is typing(I am getting it from an input field). After every letter written by a user, I need to pare it with all names and find all names with that part

• javascript
• reactjs

Share Improve this question Follow edited Apr 9, 2017 at 18:03 Armen Sanoyan asked Apr 9, 2017 at 17:42 Armen SanoyanArmen Sanoyan 2,04233 gold badges2121 silver badges3535 bronze badges 6

• 2 That's not an array, its a nested object. It's also invalid syntax. – Cjmarkham Commented Apr 9, 2017 at 17:46
• yes you are right – Armen Sanoyan Commented Apr 9, 2017 at 17:51
• So is it an array or nested object? – elmeister Commented Apr 9, 2017 at 17:52
• Can you give an example of the actual object? What you have posted is still not a valid object – Rob M. Commented Apr 9, 2017 at 17:53
• @RobM. it looks like this. {name: 'Comoros', code: 'KM'}, {name: 'Congo', code: 'CG'}, {name: 'Congo, The Democratic Republic of the', code: 'CD'}, {name: 'Cook Islands', code: 'CK'}, {name: 'Costa Rica', code: 'CR'}, {name: 'Cote D\'Ivoire', code: 'CI'}, {name: 'Croatia', code: 'HR'}, {name: 'Cuba', code: 'CU'}, {name: 'Cyprus', code: 'CY'}, – Armen Sanoyan Commented Apr 9, 2017 at 17:56

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 5

Filter the contents based on the search string like

var data = [{name: 'Comoros', code: 'KM'}, {name: 'Congo', code: 'CG'}, {name: 'Congo, The Democratic Republic of the', code: 'CD'}, {name: 'Cook Islands', code: 'CK'}, {name: 'Costa Rica', code: 'CR'}, {name: 'Cote D\'Ivoire', code: 'CI'}, {name: 'Croatia', code: 'HR'}, {name: 'Cuba', code: 'CU'}, {name: 'Cyprus', code: 'CY'}]

var search = 'om';
var filterData = data.filter(item => item.name.includes(search));
console.log(filterData);

You want to use filter() and includes()

let a = [{
    name: 'Congo',
    code: 'CG'
  },
  {
    name: 'France',
    code: 'FR'
  }
];

document.getElementById('foo').addEventListener('keyup', e => {
  let val = e.target.value.toLowerCase();
  let matches = a.filter(v => v.name.toLowerCase().includes(val));
  console.log(matches);
});

<input id="foo">

Assuming you have accidentally used curly braces {} instead of brackets [] to denote an array in your question, and assuming you can use ES6 features, you can use Array.prototype.filter() and String.prototype.includes():

// countries = your array
// Assuming you put the user input in a state variable called this.state.search = the user input string
var matchingCountries = countries.filter(element => element.name.includes(this.state.search));

If you use this in your ponent's render function, and render the resulting matchingCountries array somewhere, the ponent will be reactively updated as the this.state.search is updated.

I've taken the liberty of correcting your data types:

data = [{name: 'Congo', code: 'CG'}, ...]

because the version you provided will only throw errors.

let data = [{name: 'Congo', code: 'CG'}];

...

handleKeyPress = (event) => {
    var value = this.event.target.value.toLowerCase(),
        matches = data.filter(function (item) {
            return item.name.substring(0, value.length).toLowerCase() === value;
        });
    
    console.log(matches)
}
render: function(){
     return(
         <div>
           <input type="text" onKeyPress={this.handleKeyPress} />
        </div>
     );
}

Sorry, my react skills are really sub-par, so there's probably a better way to access the value of the input, than event.target.value.