通過JSON構建嵌套過濾器（javascript）

我有一堆使用Jquery更新顯示由JSON對象生成的「東西」列表的簡單頁面上的DOM的過濾選項。每個過濾器都能很好地獨立工作（see fiddle），但是我希望它們能夠更加連接。 I.E.比方說，我按性別過濾，然後我想搜索一個名字。或者，如果我按年齡篩選，則按活動狀態過濾。我的過濾功能看起來像這樣通過JSON構建嵌套過濾器（javascript）

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

來源

2013-08-05 Alex Neigher

修改你的過濾函數接受JSON數據作爲參數和返回過濾列表。不要在過濾器函數中寫入HTML。

創建一個接受JSON作爲參數的寫入HTML函數，循環遍歷列表並將所有元素寫入頁面。

如果這樣做，您將能夠按順序調用過濾函數，將前一個函數的返回值（JSON列表）傳遞給下一個過濾器。

最後，調用你寫的HTML函數將結果寫入頁面。

來源

2013-08-05 23:52:43

事情是這樣的：

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集將進行排序和篩選，並準備呈現。例如mustache.js或我的kite.js模板引擎。

來源

2013-08-06 00:05:46

通過JSON構建嵌套過濾器（javascript）

回答

相關問題