how to display JSON data using jQuery .filter() method

Question

I am creating a page having some images, details and a search input option via JSON object. My problem is when I use search option it doesn't show any result. However it shows data on the page from JSON in normal condition.

I have tried other post as well but no luck.

Javascript search inside a JSON object

html code:

<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 code: below #button click will display the data.

$(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 data:

{
    "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

If i understood your need correctly, the click function should be something like,

depending on the field on which you want to search, ie 'thumbTitle' or 'description'

$('#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');
});

EDIT

It depends on how you filter the array, like you can also take 'description' into consideration in filter criteria like,

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

hope this helps.