search filter using json array in javascript

Question

I have a json array in which i have a list of data. I wanna create a search filter that returns an entire row that matches the key word. for example if my json array is like this :

var data = { "list":[
        {
            "engine":"Gecko",
            "browser":"Firefox 1.0",
            "platform":"Win 98+ / OSX.2+",
            "version":"1.7",

        },
     {
            "engine":"Tatsman",
            "browser":"Firefox 1.5",
            "platform":"Win 98+ / OSX.2+",
            "version":"1.8",

        },
    ]}

and listed the data in a table format

  var output="<ul>";
for (var i in data.list) {
    output+="<ul>"+"<li id='first'>"+ data.list[i].engine + " " +"</li>"+"<li id='second'>"+ data.list[i].browser +" "+"</li>"+"<li id='third'>"+data.list[i].platform+" "+"</li>"+"<li id='fourth'>" + data.list[i].version + " " +"</li>"+"</ul>";

output+="</ul>";

document.getElementById("lidynamic").innerHTML=output;

}

Now i need a search box that returns the whole entire row. for example if i search for 'tatsman' the entire row should be displayed that contain the value 'tatsman'. I got several ideas but all belong to jquery library. I need javascript only.

Easiest way to achieve this would be to loop though your array and then use regex to check if your word is contained within one of the properties of the row as it tests each row and then it should collectively send you back every row that matched? — Hano Johannes Rossouw
– Hano Johannes Rossouw, Commented Jul 3, 2015 at 10:19
Ids have to be unique. Make them (first, second, ...) classes instead — Andreas
– Andreas, Commented Jul 3, 2015 at 10:20

LFC · Accepted Answer · 2015-07-03 11:28:48Z

1

function search(data, query) {
  var list = data.list;
  for (var i = 0, row; row = list[i]; i++){
    for (var item in row) {
      if (row[item].indexOf(query) !== -1) {
        return row;
      }
    }
  }
  return false;
}

Then you can call

var row = search (data, "Tatsman");
console.log(row);

It returns the first row found. We can improve it to get all the rows which match the query, if you like.

Hope it helps :)

edited Jul 3, 2015 at 11:28

answered Jul 3, 2015 at 10:30

LFC

4073 silver badges8 bronze badges

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

2 Comments

Ayeesha Sherin Over a year ago

I tried the above method. It shows no error. But what i need is not displaying.

LFC Over a year ago

The variable row in (var row = search...) is a JSON with the result of the query. You can render with the same function you've buit to render the list. The console.log(...) Was just so you could see the result. Comment it out.

Thalaivar · Accepted Answer · 2015-07-03 10:50:12Z

 var data = {
     "list": [{
         "engine": "Gecko",
         "browser": "Firefox 1.0",
         "platform": "Win 98+ / OSX.2+",
         "version": "1.7",

     }, {
         "engine": "Tatsman",
         "browser": "Firefox 1.5",
         "platform": "Win 98+ / OSX.2+",
         "version": "1.8",
     }, ]
 }

Typically you need something like this below, when your datastructure can become complex and you would need recurssion.

function findValue( obj, key, value ){
    if( obj[key] === value ) return true;
    for( item in obj ){
        if( obj[item] != null && obj[item][key] === value ){
            return true;
        }
        if( typeof obj[item] == "object" && obj[item]!= null ){
            var found = findValue(obj[item], key, value );
            if( found == true ) return true;
        }
    }
    return false;
}

var searchedItem = [];
for( var items in data.list ){
    if(findValue( data.list[items], "engine" , "Tatsman") === true ){
        searchedItem.push( data.list[items] );
    }
}

console.log(searchedItem);

Below is a working fiddle: http://jsfiddle.net/spechackers/17kj3h2j/1/

Collectives™ on Stack Overflow

search filter using json array in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related