onchange 事件期间的 UnderScore 动态过滤器

Question

在 onchange 事件期间尝试通过传递参数来过滤对象时，结果得到一个空数组。

虽然尝试对这些键和值进行硬编码，但它 return 是一个对象并且工作正常，在这种情况下，它总是 return 一个具有 Ram[ 的数组=32=] 作为值

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')">

但在下面的例子中，它 return 是一个空数组

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')">

您可能应该使用内部变量 filteredEmpDetails 才能多次使用 onFilter 函数。

Answer 2

过滤器

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

查看列表中的每个值，返回通过真值测试（谓词）的所有值的数组。

您的代码存在一些问题。

首先，_.filter的第二个参数应该是一个函数返回一个 bool 指示天气的项目应该被过滤掉与否。
其次，您在 empDetails 之外定义了您的 onFilter函数，应该定义在里面所以每个 onFilter 的执行不依赖于一个 empDetails 变量。

下面的代码应该可以解决您的问题：

function onFilter(columnName) {
    var empDetails = [
     {
         name: "Raju",
      id: 123
     },
     {
      name: "Ram",
      id: 456
     },
     {
      name: "Anand",
      id: 789
     },
     {
      name: "Venkat",
      id: 987
     }
    ];
 console.log(columnName);
 var columnValue = document.getElementById(columnName).value;
 console.log(columnValue);
 empDetails = _.filter(empDetails, val => val[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')">

onchange 事件期间的 UnderScore 动态过滤器

UnderScore Dynamic Filter during onchange event

html

javascript

onchange

underscore.js