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

Question

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

虽然尝试对这些键和值进行硬编码，但它会返回一个对象并且工作正常，在这种情况下，它总是会返回一个以 Ram 作为值的数组

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

并且您可能应该使用内部变量 filteredEmpDetails 以便能够多次使用 onFilter 函数。