Как найти значение в массиве jquery

Vanilla JS

To search in the array with Vanilla JS I would use the filter() method implemented into the Array prototype.

Note: For very large arrays you might want to consider refactoring those to async/await functions else it might slow down the user interface.

1. Using regular expressions (slower)

This is the most flexible approach as you could search for different patterns. You should be aware that the search term here is not a plain text, thus you have to escape most of non-alphanumeric chars according to the syntax. You should not pass unprocessed user input directly to the function, as it will not work as expected.

let a = ["foo","fool","cool","god"];
var term = 'oo'; // search term (regex pattern)
var search = new RegExp(term , 'i'); // prepare a regex object
let b = a.filter(item => search.test(item));
console.log(b); // ["foo","fool","cool"]

2. Using indexOf (faster)

In this particular case I would rather use indexOf() which is basically an equivalent of LIKE %term% but much faster than using regular expressions when working with large arrays.

It is a common case to do case-insensitive searches so make sure to use toLowerCase() for both the search terms and the array items. Otherwise remove it everywhere from the examples.

let a = ["foo","fool","cool","god"];
let term = 'oo';
let b = a.filter(item => item.toLowerCase().indexOf(term) > -1);
console.log(b); // ["foo","fool","cool"]

ES6 style (ES2015)

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

const filterItems = (needle, heystack) => {
  let query = needle.toLowerCase();
  return heystack.filter(item => item.toLowerCase().indexOf(query) >= 0);
}

console.log(filterItems('ap', fruits)); // ['apple', 'grapes']
console.log(filterItems('ang', fruits)); // ['mango', 'orange']

ES5 style

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filterItems(needle, heystack) {
  var query = needle.toLowerCase();
  return heystack.filter(function(item) {
      return item.toLowerCase().indexOf(query) >= 0;
  })
}

console.log(filterItems('ap', fruits)); // ['apple', 'grapes']
console.log(filterItems('ang', fruits)); // ['mango', 'orange']

This is the outdated answer

To search in the array with jQuery you might use jQuery.grep() or
jQuery.map(). Both return new array with filtered elements using a
callback function.

The fastest implementation (case insensitive) is using indexOf and
toUpperCase in the callback:

var search_term = 'oo'; // your search term as string
var search = search_term.toUpperCase();
var array = jQuery.grep(a, function(value) {
    return value.toUpperCase().indexOf(search) >= 0;
});

If you don’t need case insensitive search you can remove both .toUpperCase() to speed it up even further.

More flexible but much slower (good enough for small arrays) is to use
regular expression:

var search_term = "oo"; // search term
var search = new RegExp(search_term , "i");
var arr = jQuery.grep(a, function (value) {
    return search.test(value);
});

or

var search_term = "oo"; // search term
var search = new RegExp(search_term , "i");
var arr = jQuery.map(a, function (value) {
    return value.match(search) ? value : null;
});

Regular expressions allow you to make searches much more complex than %value%. However don’t use it if you don’t need it because it is
many times slower.

you should get an array arr with the matched elements

I am trying to write a simple input field validation plugin at the moment (more of a learning exercise really) and thought this would not be too hard, seeing as all I should have to do is:

1. Get input fields
2. Store them in array with each one’s
   value
3. On submit of form check if array
   contains any empty strings

But I seem to fail at writing something that checks for an empty string (read: input with no text inside) inside my array.

Here is the code I have so far:

var form = $(this), // passed in form element
    inputs = form.find('input'), // all of this forms input fields
    isValid = false; // initially set the form to not be valid


function validate() {
    var fields = inputs.serializeArray(); // make an array out of input fields

    // start -- this does not work
    for (var n in fields) {
        if (fields[n].value == "") {
            isValid = false;
            console.log('failed');
        } else {
            isValid = true;
            console.log('passed');
        };
    }
    // end -- this does not work

}; // close validate()

// TRIGGERS
inputs.live('keyup blur', function(event) {
    validate();
});

Any help with how I can check if one of the fields is blank and if so return a isValid = false would be much appreciated.

I also played around with the $.inArray("", fields) but this would never return 0 or 1 even when the console.log showed that the fields had no value.

Thanks for reading.

In this tutorial, I show how you can check whether an Array already contains a specific value or not using Javascript and jQuery.

This requires within the program in some cases like –

• Stop new value from insert if it already exists in an Array.
• Execute script when the Array contains a particular value.
• etc.

If you are familiar with PHP, where you can use the in_array() function to search value in the Array, and it returns the Boolean value ( TRUE or FALSE ).

There are inbuilt methods in jQuery and JavaScript that return the index position of the value which you can use for the search.

Contents

1. Loop
2. Array.indexOf()
3. jQuery.inArray()
4. Conclusion

1. Loop

First start with a loop.

You can easily find the value within an Array by traversing the Array and check for the value.

Completed Code

<script type='text/javascript'>

var names_arr = ['sonarika','yogesh','sumit','sonarika','vijay','anil'];
 
function checkValue(value,arr){
  var status = 'Not exist';
 
  for(var i=0; i<arr.length; i++){
    var name = arr[i];
    if(name == value){
      status = 'Exist';
      break;
    }
  }

  return status;
}
console.log('status : ' + checkValue('sonarika', names_arr) );
console.log('status : ' + checkValue('mayank', names_arr) );
</script>

Output

status : Exist
status : Not exist

For making your searching process simpler you can use jQuery and JavaScript inbuilt function.

2. Array.indexOf()

It is a JavaScript method that returns the index position of the value. If it doesn’t find the value then it returns -1.

It works both with string and an Array.

Syntax –

value-from-which-search.indexOf( search-value );

Completed Code

<script type='text/javascript'>
var names_arr = ['sonarika','yogesh','sumit','vijay','anil'];
var text = "Sonarika Bhadoria";

// Search in Array
console.log( 'Index : ' + names_arr.indexOf('sumit') );
console.log( 'Index : ' + names_arr.indexOf('vishal') );

// Search in String
console.log( 'Index : ' + text.indexOf('a') );

</script>

Output

Index : 2
Index : -1
Index : 3

3. jQuery.inArray()

It is a jQuery function that returns the index position of the value when it finds the value otherwise -1.

It also works with string and an Array.

Syntax –

jQuery.inArray( search-value, value-from-which-search);

Example

<script type='text/javascript'>
var names_arr = ['sonarika','yogesh','sumit','vijay','anil'];
var text = "Yogesh singh";
// Searching in Array
console.log( 'Index : ' + jQuery.inArray('sumit', names_arr) );
console.log( 'Index : ' + jQuery.inArray('vishal', names_arr ));
 
// Searching in String variable
console.log( 'Index : ' + jQuery.inArray( "e", text ));

</script>

Output

Index : 2
Index : -1
Index : 3

4. Conclusion

I discussed some of the methods which you can use to search your value in the existing Array. Using this you can remove or replace the duplicate values.

If you are using jQuery within your project then you can simply go with inArray() method otherwise you can indexOf() method.

If you found this tutorial helpful then don’t forget to share.