Question

我是jQuery和JSON的新手（当你看下面我的代码时，你会很快看到我有多新）。

我有一个JSON文件，我想允许用户输入一个搜索词（这将是JSON文件中的一个键））并在网页上显示相应的JSON值。

我已经搜索了这个论坛和网络，并且使用我发现的示例，我已经将一个脚本和一些HTML混在一起，但是，出乎意料！它无法正常工作。我粗略地了解了剧本的作用，但我发现很难理清错误。

希望有人能提供帮助。

HTML：

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

jQuery的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

$('#search').keyup(function() {
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, "i");
    $.get('products.json', function(data) {
        var output = '<ul class="searchresults">';
        $(data).find(searchField).each(function(index, value){
            var val = value.firstChild.nodeValue;
            if ((val.search(myExp) != -1)) {
                output += '<li>' + val + '</li>';
            }       
        });
        output += '</ul>';
        $('#result').html(output);
    });  
});

</script>

JSON（products.json）（JSON文件将比这更长。我已经简化了它）：

{"colors":[
    {"A":"red"},
    {"B":"green"},
    {"C":"blue"}
]}

因此，如果用户键入＆＃39; B＆＃39;进入HTML搜索领域，我想要＆＃39;绿色＆＃39;显示在网页上。

Answer 1

请试试这个：

$('#search').keyup(function() {
    var searchField = $('#search').val();
    $.getJSON('https://api.myjson.com/bins/59t77', function(data) {
    console.log(data);
        var output = '<ul class="searchresults">';
        $.each(data.colors, function(k, obj) {
            if(obj[searchField]) {
                output += '<li>' + obj[searchField] + '</li>';
            }
        });
        output += '</ul>';
        $('#result').html(output);
    });  
});

如果对您的具体问题有更多解释，我可以帮助您找到更好的选择。

演示： https://jsfiddle.net/iRbouh/0z228fya/

Answer 2

简单代码：

if (typeof json.colors['B'] != 'undefined') {
    console.log(json.colors['B']);
}

Answer 3

您可以将grep用于来自对象数组的过滤数据，如下所示。

http://manojmahato.com.np/javascript/jquery-remove-item-array-objects-jquery/

var id = 1;
var result = $.grep(data, function(e){
return e.id != id;
});

这个来自json的过滤数据但在你的情况下，你必须从数组中过滤对象的密钥所以你可以使用each作为

var data = {"colors":[
    {"A":"red"},
    {"B":"green"},
    {"C":"blue"}
]};

var result=[];
var SeacrchKey="A";
$.each( data.colors, function( key, value ) {
 if (SeacrchKey in value)
   result.push(value);
});
console.log(result)

然后您可以根据需要绑定结果。 result包含已过滤对象的数组

Answer 4

试试这个：

Activity

}）;

jQuery搜索特定值的JSON

4 个答案: