Javascript search inside a JSON object

Question

I had a JSON string / object in my application.

{"list": [     {"name":"my Name","id":12,"type":"car owner"},     {"name":"my Name2","id":13,"type":"car owner2"},     {"name":"my Name4","id":14,"type":"car owner3"},     {"name":"my Name4","id":15,"type":"car owner5"} ]} 

I had a filter box in my application, and when I type a name into that box, we have to filter the object and display the result.

For example, if the user types "name" and hits search, then we have to search full names in the JSON object and return the array, just like a MySQL search ...

My question is to filter the json object with string and return the array....

Answer 1

You could just loop through the array and find the matches:

var results = []; var searchField = "name"; var searchVal = "my Name"; for (var i=0 ; i < obj.list.length ; i++) {     if (obj.list[i][searchField] == searchVal) {         results.push(obj.list[i]);     } } 

Answer 2

If your question is, is there some built-in thing that will do the search for you, then no, there isn't. You basically loop through the array using either String#indexOf or a regular expression to test the strings.

For the loop, you have at least three choices:

1. A boring old for loop.

2. On ES5-enabled environments (or with a shim), Array#filter.

3. Because you're using jQuery, jQuery.map.

Boring old for loop example:

function search(source, name) {     var results = [];     var index;     var entry;      name = name.toUpperCase();     for (index = 0; index < source.length; ++index) {         entry = source[index];         if (entry && entry.name && entry.name.toUpperCase().indexOf(name) !== -1) {             results.push(entry);         }     }      return results; } 

Where you'd call that with obj.list as source and the desired name fragment as name.

Or if there's any chance there are blank entries or entries without names, change the if to:

        if (entry && entry.name && entry.name.toUpperCase().indexOf(name) !== -1) { 

Array#filter example:

function search(source, name) {     var results;      name = name.toUpperCase();     results = source.filter(function(entry) {         return entry.name.toUpperCase().indexOf(name) !== -1;     });     return results; } 

And again, if any chance that there are blank entries (e.g., undefined, as opposed to missing; filter will skip missing entries), change the inner return to:

        return entry && entry.name && entry.name.toUpperCase().indexOf(name) !== -1; 

jQuery.map example (here I'm assuming jQuery = $ as is usually the case; change $ to jQuery if you're using noConflict):

function search(source, name) {     var results;      name = name.toUpperCase();     results = $.map(source, function(entry) {         var match = entry.name.toUpperCase().indexOf(name) !== -1;         return match ? entry : null;     });     return results; } 

(And again, add entry && entry.name && in there if necessary.)