在 JSON 文件中搜索数据答案

【问题标题】：Search data in JSON file在 JSON 文件中搜索数据
【发布时间】：2017-07-14 00:59:14
【问题描述】：

我创建了脚本以从外部 JSON 文件中获取数据并附加到 #test 元素：

$(document).ready(function(){
    $.getJSON('/path_to_json_file',function(json){
      $.each(json, function(i,data){
        $("#test").append('<li class="col-xs-4 col-md-3 ' + data.status + '" data-id="' + data.id + '"><div class="area view"><div class="game-label ' + data.title + '"><div class="news">News</div></div><div class="image ' + data.url_title + '"></div><div class="mask"><a href="" class="btn">BTN1</a><a href="" class="btn">BTN2</a><a href="#' + data.url_title + '" class="btn ' + data.info_visible + '"><span class="glyphicon glyphicon-info-sign"></span></a><a class="btn btn-star for-members"><span class="glyphicon"></span></a></div></div><div class="game-name sr-only"><a href="#">' + data.title + '</a></div></li>');
      });

    });

  });

一切正常。但我也想选择搜索 JSON 数据并在页面上显示结果。在输入中输入条目的名称 (jsondata6) 时，所有与搜索语句不匹配的条目都应该消失，以便用户只能看到正确的项目。

搜索输入

<input type="search" name="search" id="search" value="" />

JSON 文件

{"jsondata1":"jsondata1",
"jsondata2":"jsondata2",
"jsondata3":"jsondata3",
"jsondata4":"jsondata4",
"jsondata5":"jsondata5",
"jsondata6":"jsondata6"
}

来自 JSON 的标记

<ul id="test">
  <li class="col-xs-4 col-md-3 jsondata1" data-id="jsondata2">

    <div class="area view">
      <div class="game-label jsondata3">
      <div class="news">News</div>
    </div>
    <div class="image jsondata4"></div>
    <div class="mask">
        <a href="" class="btn btn-play js-run-game"></a>
        <a href="" class="btn btn-demo js-run-demo"></a>
        <a href="#" class="btn btn-info jsondata5"><span class="glyphicon glyphicon-info-sign"></span></a>
        <a class="btn btn-star"><span class="glyphicon"></span></a>
    </div>
</div>
<div class="game-name sr-only"><a href="#">jsondata6</a></div>

我正在尝试修改上面的脚本，但到目前为止还没有成功。有什么帮助吗？

谢谢！

【问题讨论】：

你能不能做一个小提琴，这样会更容易帮助你
stackoverflow.com/questions/4992383/…

标签： javascript jquery json search getjson

【解决方案1】：

我可能会将获取的 json 数据推送到一个数组中，例如

var some_global_array=[]
$.each(json, function(i,data){
    some_global_array.push(data);
}

然后从填充的数组中创建元素。那时执行搜索会容易得多。然后容器 li 将具有 data-my-array-id （或一个类，你更喜欢什么）整数属性

然后每个搜索将遍历 some_global_array（如 for(var i=0;i<some_global_array.length;i++){... 并找到应该由您的数据搜索逻辑隐藏/显示的索引。然后如果您发现应该显示索引，只需隐藏元素带有不符合搜索条件的元素的data-my-array-id/显示所有其他元素

【讨论】：