CODEWITHSUNDEEP
javascriptarraysjson
Ayeesha Sherin
Ayeesha Sherin

Reputation: 3

search filter using json array in javascript

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.

Upvotes: 0

Views: 131

Answers (2)

LFC
LFC

Reputation: 407

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 :)

Upvotes: 1

Thalaivar
Thalaivar

Reputation: 23622

 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/

Upvotes: 0

Related Questions