如何使用 jQuery .filter() 方法显示 JSON 数据

Question

我正在通过 JSON 对象创建一个包含一些图像、详细信息和搜索输入选项的页面。 我的问题是当我使用搜索选项时，它没有显示任何结果。但是，它在正常情况下会在页面上显示来自 JSON 的数据。

我也尝试过其他帖子，但没有运气。

Javascript search inside a JSON object

html代码：

<div class="wrapper">
            <div class="header">Logo Name</div>
            <div class="middle">
                <div id="results"></div>
                <div class="leftContainer">

                </div>
                <div class="rightContainer">
                    <input type="text" id="inputText" />&nbsp;&nbsp;<input type="button" id="button" value="Search Data" />
                </div>
            </div>
            <div class="footer">
                &copy; 2013 ABC. All rights reserved.
            </div>
        </div>

jQuery 代码： #button 点击​​下方会显示数据。

$(document).ready(function(){        
    $.getJSON('assets/js/sample.json', function(data){
        var items = [];

        $.each(data.latest, function() {
            items.push("<h2>" + this['thumbTitle'] + "</h2>");
            items.push("<ul><li>" + this['thumbSmall'] + "</li></ul>");
            items.push("<p>" + this['description'] + "</p>");
        });

        $('<div />', {
           html: items.join('')
            }).appendTo('.leftContainer');

        $('#button').on('click', function(data, name) {                                       


            name = $('#inputText').val().toUpperCase();
            alert(name);  
            var results;
            results = data.latest.filter(function() {
                return data.latest.name.toUpperCase().indexOf(name) !== -1;
            });
            return $('#results').innerHTML() = results;
            console.log(results);
        });
   });
});

JSON 数据：

{
    "latest"    :[
                    { 
                        "thumbTitle":"Image Title1",
                        "thumbSmall" : ["<img src='assets/images/thumb1.jpg' alt='' />", "<img src='assets/images/thumb2.jpg' alt='' />"],
                        "description" : "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries."
                    }, 
                    { 
                        "thumbTitle":"Image Title2",
                        "thumbSmall" : ["<img src='assets/images/thumb3.jpg' alt='' />", "<img src='assets/images/thumb2.jpg' alt='' />", "<img src='assets/images/thumb4.jpg' alt='' />", "<img src='assets/images/thumb1.jpg' alt='' />"],
                        "description" : "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
                    }, 
                    { 
                        "thumbTitle":"Image Title3",
                        "thumbSmall" : ["<img src='assets/images/thumb3.jpg' alt='' />", "<img src='assets/images/thumb2.jpg' alt='' />"],
                        "description" : "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable."
                    }, 
                    { 
                        "thumbTitle":"Image Title4",
                        "thumbSmall" : ["<img src='assets/images/thumb1.jpg' alt='' />"],
                        "description" : "The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham."
                    }
    ]
}

Answer 1

如果我正确理解您的需求，点击功能应该类似于，

取决于您要搜索的字段，即“thumbTitle”或“描述”

$('#button').on('click', function(e) {
    e.preventDefault();                                       
    var name = $('#inputText').val().toUpperCase();
    alert(name);  
    var results = data.latest.filter(function(elem) {
                      return elem.thumbTitle.toUpperCase().indexOf(name) !== -1;
                  });
    console.log(results.length);
    var items = [];
    $.each(results, function() {
        items.push("<h2>" + this['thumbTitle'] + "</h2>");
        items.push("<ul><li>" + this['thumbSmall'] + "</li></ul>");
        items.push("<p>" + this['description'] + "</p>");
    });

    $('#results').empty();

    $('<div />', {
       html: items.join('')
    }).appendTo('#results');
});

编辑

这取决于您如何过滤数组，就像您也可以在过滤条件中考虑“描述”，例如，

var results = data.latest.filter(function(elem) {
                      return elem.thumbTitle.toUpperCase().indexOf(name) !== -1 || elem.description.toUpperCase().indexOf(name) !== -1;
                  });

希望这会有所帮助。