Question

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

在尝试对这些键和值进行硬编码时，它会返回一个对象并且其工作正常，在这种情况下，它将始终返回一个 Ram 作为值的数组

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs') {
        exclude group: 'org.codehaus.groovy'
    }
    compile 'org.codehaus.groovy:groovy:2.4.12:grooid'
    ...
}

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);
}

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 Dynamic Filter

2 个答案: