如何使用网页中的多个不同参数对 JSON 进行排序？

Question

For a school I am creating a program that uses JSON and JavaScript to pull back data onto a webpage. I understand how to sort through the array and pull back values of they match. Lets says I have this JSON.

{"name":"Michael","age":30,"bday":"05/12/1982"}
{"name":"Andy", "age":30,"bday":"02/21/1992"}
{"name":"Justin", "age":19,"bday":"12/07/1972"}

How would I be able to have a name input, age select and a birthday input that I could sort by any combination of those being used.

Say everyone that is 30 and born on 02/21/1992, or everyone that is 30? I want to be able to sort by every possible combination of data entry and I do not want to just use a bunch of if() statements.

Answer 1

The algorithm looks for every property in search and if all comparisons are true, then the element is added to the result set.

 function filter(array, search) { return array.filter(function (a) { return Object.keys(search).every(function (k) { return ( a[k] === search[k] || typeof search[k] === 'object' && +search[k].min <= a[k] && a[k] <= +search[k].max || typeof search[k] === 'function' && search[k](a[k]) ); }); }); } var data = [{ name: "Michael", age: 30, bday: "05/12/1982" }, { name: "Andy", age: 30, bday: "02/21/1992" }, { name: "Justin", age: 19, bday: "12/07/1972" }]; // serach for name with n document.write('<pre>' + JSON.stringify(filter(data, { name: function (s) { return s.match(/n/i); } }), 0, 4) + '</pre>'); // search for age = 30 document.write('<pre>' + JSON.stringify(filter(data, { age: 30 }), 0, 4) + '</pre>'); // search for age = 30 and bday = 02/21/1992 document.write('<pre>' + JSON.stringify(filter(data, { age: 30, bday: '02/21/1992' }), 0, 4) + '</pre>'); // search for age between 18 and 20 document.write('<pre>' + JSON.stringify(filter(data, { age: { min: 18, max: 20} }), 0, 4) + '</pre>');

Answer 2

you can have input for filtring information in ur HTML file

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

and JS file like this

$("#search").keyup(function () {
var searchField = $("#search").val();
// RegExp for case sensitive 
var myReg = new RegExp(searchField,"i");
$.getJSON('data.json',function (data) {
    var output ="<ul class='searchresults'>";
    $.each(data,function(key,val){
        if((val.name.search(myReg) != -1 ) || (val.info.search(myReg) != -1)){

            output +='<li>';
            output += "<h2>"+val.name+"</h2>";
            output += "<p>"+val.age+"</p>";
            output+='</li>';
        }
    });
    output +='</ul>';
    $("#update").html(output)
});

});