JS 處理后臺數(shù)據(jù)

后臺獲取到的ajax的JSON數(shù)組，原始數(shù)據(jù)
[
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "320", "FromStation": "武漢"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "320", "FromStation": "武漢"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "320", "FromStation": "武漢"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"}
]

前端頁面效果

頁面上三個input是多選。
比如第一次點南京
把FromStation為北京的數(shù)據(jù)曬出來后生成新的數(shù)據(jù)
[
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"}
]

第二次點擊選中上海
[
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "336", "FromStation": "上海"}
{"CostTime": "336", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "上海"}
]

取消反之。
之前我使用
var arr = result.filter(function (result) {

   return result.TrainType === "南京";

});
可以單一篩選出南京的數(shù)據(jù)，我寫了個方法，如下:

function filterKey(key) {

return result.filter(function (item) {

return item.FromStation === key;
})
}

但是這個方法對多個選擇的input不對。

用JS或者JQ過濾具體方式是怎么樣的。謝謝各位大牛指點下！

回答

編輯回答

不歸路

 <input type="checkbox" data-name="上海" >上海
    <input type="checkbox" data-name="南京" >南京
    <input type="checkbox" data-name="武漢" >武漢
    
         var arr = [
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "320", "FromStation": "武漢"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "320", "FromStation": "武漢"},
{"CostTime": "336", "FromStation": "南京"},
{"CostTime": "320", "FromStation": "武漢"},
{"CostTime": "310", "FromStation": "上海"},
{"CostTime": "336", "FromStation": "南京"}
];
var checks = document.querySelectorAll('input[type=checkbox]');


checks.forEach(function(){
    this.onchange = function(){
        var myarr = [];
        checks.forEach(function(el){
                if(el.checked){
                    myarr.push(el.getAttribute('data-name'));
                };
        });
        
        console.log(filterKey(myarr));
    }
});
function filterKey(myarr) {
    var checkarr = [];
    for(var i in myarr){
        checkarr = checkarr.concat(arr.filter(function(item){
            return item.FromStation === myarr[i];
        }))
    }
    return checkarr;
}

2017年8月17日 09:46