onchangeイベント中のアンダースコア動的フィルタ

Question

の間にパラメータを渡してオブジェクトをフィルタリングしようとしているときに、イベントの結果として空の配列を取得しています。

キーと値のハードコーディング、それらをしようとしたとき、それはこの場合、それは常に値

var empDetails = [{ 
 
    name: "Raju", 
 
    id: 123 
 
    }, 
 
    { 
 
    name: "Ram", 
 
    id: 456 
 
    }, { 
 
    name: "Anand", 
 
    id: 789 
 
    }, { 
 
    name: "Venkat", 
 
    id: 987 
 
    } 
 
]; 
 
function onFilter(columnName) { 
 
    var columnValue = document.getElementById(columnName).value; 
 
    empDetails = _.filter(empDetails, { 
 
    "name": "Ram" 
 
    }); 
 
    console.log(empDetails); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script> 
 
<input class="form-control input-sm" id="name" type="text" onchange="onFilter('name')">

として ラムを持つ配列を返します、オブジェクトとその作業罰金を返します。

しかし、この次のケースでは、空の配列を返す。

var empDetails = [{ 
 
    name: "Raju", 
 
    id: 123 
 
    }, 
 
    { 
 
    name: "Ram", 
 
    id: 456 
 
    }, { 
 
    name: "Anand", 
 
    id: 789 
 
    }, { 
 
    name: "Venkat", 
 
    id: 987 
 
    } 
 
]; 
 
function onFilter(columnName) { 
 
console.log(columnName); 
 
    var columnValue = document.getElementById(columnName).value; 
 
    console.log(columnValue); 
 
    empDetails = _.filter(empDetails, { 
 
    columnName: columnValue 
 
    }); 
 
    console.log(empDetails); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script> 
 
<input class="form-control input-sm" id="name" type="text" onchange="onFilter('name')">

Answer 1

期待どおり"columnName"ではなく、"name"ではないフィルタをフィルタリングします。

このソリューションは、あなたのために働くだろうが、underscore.js

var empDetails = [{ 
 
    name: "Raju", 
 
    id: 123 
 
    }, { 
 
    name: "Ram", 
 
    id: 456 
 
    }, { 
 
    name: "Anand", 
 
    id: 789 
 
    }, { 
 
    name: "Venkat", 
 
    id: 987 
 
    } 
 
]; 
 
function onFilter(columnName) { 
 
    console.log(columnName); 
 
    var columnValue = document.getElementById(columnName).value; 
 
    console.log(columnValue); 
 
    var filteredEmpDetails = empDetails.filter(function (el) { 
 
    return el[columnName] === columnValue; 
 
    }); 
 
    console.log(filteredEmpDetails); 
 
}

<input class="form-control input-sm" id="name" type="text" onchange="onFilter('name')">

そして、あなたはおそらくより onFilter -function以上を使用できるように内部変数 filteredEmpDetailsを使用する必要がありますなしです一度。

Answer 2

フィルタ

_.filter(list, predicate, [context])

真理テスト（述語）を通過するすべての値の配列を返す、リスト内の各値を介して見えます。

---

コードにはいくつか問題があります。

• まずアップは、_.filterの第2引数は、アイテムが かを除外しなければならないbool口述天候を返す関数 でなければなりません。あなたは onFilter機能の外empDetailsを定義した

• は第二に、そうonFilterの各 実行は1つのempDetailsの変数に依存しない内を定義する必要があります。

以下のコードは、あなたの問題を解決する必要があります。

function onFilter(columnName) { 
 
    var empDetails = [ 
 
\t  { 
 
\t   name: "Raju", 
 
\t  \t id: 123 
 
\t  }, 
 
\t  { 
 
\t  \t name: "Ram", 
 
\t  \t id: 456 
 
\t  }, 
 
\t  { 
 
\t  \t name: "Anand", 
 
\t  \t id: 789 
 
\t  }, 
 
\t  { 
 
\t  \t name: "Venkat", 
 
\t  \t id: 987 
 
\t  } 
 
    ]; 
 
\t console.log(columnName); 
 
\t var columnValue = document.getElementById(columnName).value; 
 
\t console.log(columnValue); 
 
\t empDetails = _.filter(empDetails, val => val[columnName] == columnValue); 
 
\t console.log(empDetails); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script> 
 
<input class="form-control input-sm" id="name" type="text" onchange="onFilter('name')">