通过JSON(javascript）构建嵌套过滤器

Building nested filters via JSON (javascript)

本文关键字：构建 嵌套 过滤器 javascript JSON 通过      更新时间：2023-09-26

我有很多过滤选项，它们使用Jquery在一个简单的页面上更新DOM，该页面显示JSON对象生成的渲染"东西"列表。每一个过滤器都能很好地独立工作（见fiddle），然而，我希望它们之间的连接更紧密。I.E.假设我按性别筛选，然后我想搜索一个名字。或者，如果我按最小年龄筛选，则按活动状态筛选。我的过滤功能看起来像这个

function sortByAge(value) {
    document.getElementById("range").innerHTML= value;
    var data = getData();
    var length = data.result.length;
    var htmlSlug = "";
    for (var i=0; i< length; i++) {
        if (data.result[i].age >= value){ 
            htmlSlug += writeHTML(data,i);
        }
    }
    if (!htmlSlug) htmlSlug = "Nothing Found";
    $('.data-container').html(htmlSlug);
}
function writeHTML(data, i) {
    //this gets called any time we need to build html to the DOM
    var active = "";
    if (data.result[i].isActive == true) {
        var active = "active";
    }
    var slug = '<div class="member-card-container '+active+'">'+
            '<div class="info">'+
                '<span class="name">'+data.result[i].name+'</span> '+
                '<span class="gender">'+data.result[i].gender+ '</span> '+
                '<span class="age">'+data.result[i].age+'</span>'+
                '<span class="latitude">'+data.result[i].latitude+'</span>'+
                '<span class="longitude">'+data.result[i].longitude+'</span>'+
            '</div>'+
            '<div class="address">'+data.result[i].address+'</div>'+
        '</div>';
    return slug;
}

再次，请参阅fiddle

修改您的过滤函数以接受JSON数据作为参数并返回过滤后的列表。不要在筛选函数中编写HTML。

创建一个writeHTML函数，该函数接受JSON作为参数，在列表上循环，并将所有元素写入页面。

如果这样做，您将能够按顺序调用过滤函数，将上一个函数的返回值（JSON列表）传递到下一个过滤器。

最后，调用writeHTML函数将结果写入页面。

类似这样的东西：

function byAgeAsc(r1,r2) { return r2.age - r1.age; }
function byAgeDesc(r1,r2) { return r1.age - r2.age; }
var data = data.result.sort(byAgeAsc).filter(function(r) { return r.age > value } );

data集合将被排序和过滤，并准备进行渲染。例如，通过splash.js或mykite.js模板引擎。

相关文章：