Using jQuery.find() on array or similar

Question

Lets say I have a search box and whatever is typed in it is stored as:

var search_input = $(this).val();

How would I search my array with this value?

var devices = [{"Device_ID":"43","Image":"Amazon-Kindle-Fire.png","Manufacturer":"Amazon","Model":"Kindle Fire","Type":"Tablet"},{"Device_ID":"44","Image":"Apple-iPad.png","Manufacturer":"Apple","Model":"iPad","Type":"Tablet"}]

So lets say I had Amazon, or Kindle etc in my search_input variable, I would want it to search the array and output the below. The same would apply for any thing typed or anything in the array

<div id="device">43</div>
<div id="image">Amazon-Kindle-Fire.png</div>
<div id="name">Amazon Kindle Fire</div>

To achieve what you want, I would loop through the array using $.each function as well as the JavaScript indexOf function to search the string. The property of the object I would use the indexOf function would be the "name" property. Can give an example if you tell me how you want to output the result? I.e. Do you want me to give an example using Jquery Templates to output the result if a match is found? — Kwex
– Kwex, Commented Oct 5, 2012 at 14:22

epascarello · Accepted Answer · 2012-10-05 14:28:24Z

6

Simple loop in a loop

var devices = [{"Device_ID":"43","Image":"Amazon-Kindle-Fire.png","Manufacturer":"Amazon","Model":"Kindle Fire","Type":"Tablet"},{"Device_ID":"44","Image":"Apple-iPad.png","Manufacturer":"Apple","Model":"iPad","Type":"Tablet"}];

function findItem (term) {
    var items = [];
    for (var i=0;i<devices.length;i++) {
        var item = devices[i];
        for (var prop in item) {
            var detail = item[prop].toString().toLowerCase();
            if (detail.indexOf(term)>-1) {
                items.push(item);
                break;               
            }
        }
    }
    return items;
}

console.log( findItem("amazon") );  //returns one item
console.log( findItem("kindle") );  //returns one item
console.log( findItem("apple") );   //returns one item
console.log( findItem("tablet") );  //returns two items
console.log( findItem("nerd") );    //returns zero items

jsFiddle

answered Oct 5, 2012 at 14:28

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

K20GH Over a year ago

How would I tie my var search_input = $(this).val(); value into it to search and output the details as mentioned?

epascarello Over a year ago

You do not know how to access an object to produce the output? var result = findItem("amazon"); alert(result[0].Image);

K20GH Over a year ago

Oh yeah of course - sorry long day! So if I try to get the Model instead and use alert(result[0].Model); the console outputs Cannot read property 'Model' of undefined

Dhruv Singhal Over a year ago

why don't we just use grep and save some lines of code?

epascarello Over a year ago

@DhruvSinghal well in 2012 this was a good answer, in this day in age filter() would be the way to go.

Daniel · Accepted Answer · 2021-03-05 15:05:02Z

4

I think a more elegant way to achieve the goal in this question would be to use jQuery.grep() -- see http://api.jquery.com/jquery.grep/

var search_input = $(this).val();
var devices = [
       {"Device_ID":"43","Image":"Amazon-Kindle-Fire.png","Manufacturer":"Amazon","Model":"Kindle Fire","Type":"Tablet"},
       {"Device_ID":"44","Image":"Apple-iPad.png","Manufacturer":"Apple","Model":"iPad","Type":"Tablet"}
];

var matchingItems = $.grep(devices, function(e) {
            return (e["Manufacturer"].indexOf(search_input) > -1 ||
                    e["Model"].indexOf(search_input) > -1);
});

Now matchingItems contains an array of items that have search_input word in Manufacturer or Model properties, and you can output those in html.

edited Mar 5, 2021 at 15:05

answered Dec 21, 2014 at 20:41

Daniel

1861 gold badge1 silver badge7 bronze badges

2 Comments

Dhruv Singhal Over a year ago

what is 'term' here?

Daniel Over a year ago

@DhruvSinghal, term was a typo, should be search_input, updated the answer

Carlos Martinez T · Accepted Answer · 2012-10-05 14:17:37Z

1

I think you need:

jQuery.inArray()

http://api.jquery.com/jQuery.inArray/

answered Oct 5, 2012 at 14:17

Carlos Martinez T

6,5481 gold badge36 silver badges40 bronze badges

2 Comments

epascarello Over a year ago

But it is an Array of objects

Carlos Martinez T Over a year ago

You are right!, sorry, in that case you can use "each". $.each( devices , function(){ if ($(this).device == 43) //output } )

Community · Accepted Answer · 2017-05-23 10:27:45Z

1

Another way would be to replace your array with a map (JavaScript object) where the key is the value you want to compare with the search_input. That way you simply look up the key and get the object.

var devices = {"Amazon Kindle": {"Device_ID":"43","Image":"Amazon-Kindle-Fire.png","Manufacturer":"Amazon","Model":"Kindle Fire","Type":"Tablet"},{"Device_ID":"44","Image":"Apple-iPad.png","Manufacturer":"Apple","Model":"iPad","Type":"Tablet"}}

The second step involves converting the JavaScript object to XML, which is already answered on SO here What's the best way to serialize JavaScript objects to XML?

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Oct 5, 2012 at 14:23

Johanna Larsson

10.8k6 gold badges41 silver badges50 bronze badges

Collectives™ on Stack Overflow

Using jQuery.find() on array or similar

4 Answers 4

5 Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related