在JavaScript中使用json数组搜索过滤器

阿耶莎·谢林(Ayeesha Sherin)

我有一个json数组,其中有一个数据列表。我想创建一个搜索过滤器,该过滤器返回与关键字匹配的整行。例如,如果我的json数组是这样的:

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",

        },
    ]}

并以表格格式列出数据

  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;

}

现在,我需要一个返回整个整行的搜索框。例如,如果我搜索“ tatsman”,则应显示包含值“ tatsman”的整行。我有几个想法,但都属于jquery库。我只需要JavaScript。

Thalaivar
 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",
     }, ]
 }       

通常,当您的数据结构变得复杂并且需要递归时,您将需要以下类似的内容

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

以下是有效的小提琴:http : //jsfiddle.net/spechackers/17kj3h2j/1/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章