在javascript中使用json数组搜索过滤器答案

【问题标题】：search filter using json array in javascript在javascript中使用json数组搜索过滤器
【发布时间】：2015-07-03 19:28:48
【问题描述】：

我有一个 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。

【问题讨论】：

实现这一点的最简单方法是遍历您的数组，然后使用正则表达式检查您的单词是否包含在该行的属性之一中，因为它测试每一行，然后它应该集体发送你支持匹配的每一行？
ID 必须是唯一的。将它们改为 (first, second, ...) 类

标签： javascript arrays json

【解决方案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);

它返回找到的第一行。如果您愿意，我们可以改进它以获取与查询匹配的所有行。

希望对你有帮助:)

【讨论】：

我试过上面的方法。它显示没有错误。但我需要的不是显示。
(var row = search...) 中的变量 row 是带有查询结果的 JSON。您可以使用与渲染列表相同的函数进行渲染。 console.log(...) 只是为了让您可以看到结果。把它注释掉。

【解决方案2】：

 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/

【讨论】：