我有一个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;
}
现在我需要一个返回整行的搜索框。例如,如果我搜索&#39; tatsman&#39;应显示包含值&tatsman&#39;的整行。我有几个想法,但都属于jquery库。我只需要javascript。
答案 0 :(得分: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;
}
然后你可以打电话
var row = search (data, "Tatsman");
console.log(row);
返回找到的第一行。如果您愿意,我们可以改进它以获取与查询匹配的所有行。
希望有所帮助:)
答案 1 :(得分:0)
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",
}, ]
}
通常,当您的数据结构变得复杂并且您需要 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);
下面是一个工作小提琴: http://jsfiddle.net/spechackers/17kj3h2j/1/