JS過(guò)濾原始數(shù)據(jù)

這是一個(gè)多項(xiàng)篩選過(guò)濾數(shù)據(jù)。
AJAX獲取后臺(tái)原始數(shù)據(jù)，如下
var arr = [

    {"TrainType": "D", "FromStation": "上海"},
    {"TrainType": "D", "FromStation": "武漢"},
    {"TrainType": "T", "FromStation": "上海"},
    {"TrainType": "T", "FromStation": "南京"},
    {"TrainType": "K", "FromStation": "上海"},
    {"TrainType": "K", "FromStation": "南京"},
    {"TrainType": "Y", "FromStation": "武漢"},
    {"TrainType": "Y", "FromStation": "南京"},
    {"TrainType": "Z", "FromStation": "武漢"},
    {"TrainType": "Z", "FromStation": "上海"},
    {"TrainType": "K", "FromStation": "南京"}
];

前端代碼如下：
<input type="checkbox" data-name="上海">上海
<input type="checkbox" data-name="南京">南京
<input type="checkbox" data-name="武漢">武漢
<br>
<input type="checkbox" >D
<input type="checkbox" >T
<input type="checkbox" >K
<input type="checkbox" >Y
<input type="checkbox" >Z

效果圖：

需求：第一次點(diǎn)擊上海，把有關(guān)上海的數(shù)據(jù)從原始數(shù)據(jù)曬出來(lái)，

   var arr = [
    {"TrainType": "D", "FromStation": "上海"},
    {"TrainType": "T", "FromStation": "上海"},
    {"TrainType": "K", "FromStation": "上海"},
    {"TrainType": "Z", "FromStation": "上海"}
];

第二次點(diǎn)擊南京，曬出數(shù)據(jù),

     var arr = [
    {"TrainType": "D", "FromStation": "上海"},
    {"TrainType": "T", "FromStation": "上海"},
    {"TrainType": "K", "FromStation": "上海"},
    {"TrainType": "Z", "FromStation": "上海"},
    {"TrainType": "T", "FromStation": "南京"},
    {"TrainType": "T", "FromStation": "南京"},
    {"TrainType": "T", "FromStation": "南京"},
    {"TrainType": "T", "FromStation": "南京"}
];

第三次點(diǎn)擊D，曬出數(shù)據(jù),

     var arr = [
    {"TrainType": "D", "FromStation": "上海"},
    {"TrainType": "T", "FromStation": "上海"},
    {"TrainType": "K", "FromStation": "上海"},
    {"TrainType": "Z", "FromStation": "上海"},
    {"TrainType": "T", "FromStation": "南京"},
    {"TrainType": "T", "FromStation": "南京"},
    {"TrainType": "T", "FromStation": "南京"},
    {"TrainType": "T", "FromStation": "南京"},
    {"TrainType": "D", "FromStation": "武漢"}
];

以此類推， 取消反之

之有朋友提供過(guò)寫法，
在input上加自定義屬性data-name
 <input type="checkbox" data-name="上海">上海
<input type="checkbox" data-name="南京">南京
<input type="checkbox" data-name="武漢">武漢

JS：
 $("input[type=checkbox]").each(function () {
    $(this).click(function () {
        var myarr = [];
        $("input[type=checkbox]").each(function () {
            if ($(this).is(':checked')) {
                myarr.push($(this).attr('data-name'));
            }
        });
        console.log(filterKey(myarr));
    });
});

function filterKey(myarr) {
    var checkarr = [];
    for (var i in myarr) {
        checkarr = checkarr.concat(arr.filter(function (item) {
            console.log(item);
            return item.FromStation === myarr[i];
        }))
    }
    return checkarr;
}

只能篩選單一數(shù)據(jù)。因?yàn)榉椒╢ilterKey()里面的 return item.FromStation === myarr[i]的FromStation 是變量，現(xiàn)在把它變成key變量
  function filterKey(myarr, key) {
    var checkarr = [];
    for (var i in myarr) {
        checkarr = checkarr.concat(arr.filter(function (item) {
            console.log(item);
            return item[key] === myarr[i];
        }))
    }
    return checkarr;
}

現(xiàn)在代碼
   $("input[type=checkbox]").each(function () {
    $(this).click(function () {
        var myarr = [];
        $("input[type=checkbox]").each(function () {
            if ($(this).is(':checked')) {
                myarr.push($(this).attr('data-name'));
            }
        });
        console.log(filterKey(myarr，key));
    });
});

這段就不對(duì)了？需要改變。