从javascript中的对象数组中提取匹配值答案

【问题标题】：Extract matching values from array of objects in javascript从javascript中的对象数组中提取匹配值
【发布时间】：2020-11-21 06:08:04
【问题描述】：

我有一个对象数组，我正在尝试创建一个过滤器，用户可以在其中输入几个字母并获取所有匹配记录的列表。

users = [{office: "J Limited", contact: {first_name: "James", last_name: "Wilson", address: Canada}},{office: "Q Limited", contact: {first_name: "Quin", last_name: "Ross", address: Australia}},{office: "N Limited", contact: {first_name: "Nancy", last_name: "Mathew"}, address: "England"}]

我有一个文本字段，用户在其中键入以获取结果并假设用户键入 ja 所以结果应该搜索字段办公室，联系 first_name 和 last_name 并且如果任何此类字段包含匹配的字母应该是在这种情况下请求结果输出应该是

J Limited, James, Wilson

请帮助我实现这一目标。

【问题讨论】：

标签： javascript vue.js filter

【解决方案1】：

您可以遍历数组并搜索对象。

users = [{
  office: "J Limited",
  contact: {
    first_name: "James",
    last_name: "Wilson",
    address: "Canada"
  }
}, {
  office: "Q Limited",
  contact: {
    first_name: "Quin",
    last_name: "Ross",
    address: "Australia"
  }
}, {
  office: "N Limited",
  contact: {
    first_name: "Nancy",
    last_name: "Mathew"
  },
  address: "England"
},
{
  office: "J Limited",
  contact: {
    first_name: "Jacob",
    last_name: "Wilson",
    address: "Canada"
  }
}
]

function search(searchKey) {
  searchKey = searchKey.toLowerCase();
  results = [];
  for (var i = 0; i < users.length; i++) {
    if (users[i].contact.first_name.toLowerCase().includes(searchKey) || users[i].contact.last_name.toLowerCase().includes(searchKey) || users[i].office.toLowerCase().includes(searchKey)) {
      results.push(users[i]);
    }
  }
  return results;
}

var resultObject = search("ja");
if (resultObject) {
  for(i in resultObject){
    console.log(resultObject[i].office, resultObject[i].contact.first_name, resultObject[i].contact.last_name)
  }
}

【讨论】：

这里的问题是它只搜索一条记录。如果匹配的案例不止一个怎么办？
我更新了答案。现在它检查多个匹配的情况并推入一个数组

【解决方案2】：

let users = [{
    office: "J Limited",
    contact: { first_name: "James", last_name: "Wilson", address: "Canada" }
}, {
    office: "Q Limited",
    contact: { first_name: "Quin", last_name: "Ross", address: "Australia" }
}, {
    office: "N Limited",
    contact: { first_name: "Nancy", last_name: "Mathew", address: "England"},
}];


// ig: i for case-insensitive, g for global
const regEx = new RegExp('ja', 'ig');

const result = users.filter(
    each =>
        each.office.match(regEx) ||
        each.contact.first_name.match(regEx) ||
        each.contact.last_name.match(regEx)
)
.map(
    each => [
        each.office,
        each.contact.first_name,
        each.contact.last_name
    ]
);

console.log(result);

【讨论】：

【解决方案3】：

要获得匹配的用户，您可以执行以下操作：

const searchString = 'ja'

const matchingUsers = users.filter(user => 
  user.office.contains(searchString) || 
  user.contact.first_name.contains(searchString) || 
  user.contact.last_name.contains(searchString)
)

然后您可以根据自己的喜好格式化匹配用户列表

编辑：contains 可能不适用于某些 JS 版本（适用于 Chrome），因此请将 contains 替换为 includes：

const searchString = 'ja'

const matchingUsers = users.filter(user => 
  user.office.includes(searchString) || 
  user.contact.first_name.includes(searchString) || 
  user.contact.last_name.includes(searchString)
)

【讨论】：

user.office.contains 不是我按照您的建议尝试的功能，但我收到了上述错误
有趣，可能是 JS 版本问题（在 chrome 中可以正常工作）——在这种情况下，您可以使用 includes 而不是 contains
它不检查大写小写是否不匹配
您的问题没有指定不区分大小写。在这种情况下，您可以在每个字符串和搜索字符串上调用 .toLowerCase()，例如user.office.toLowerCase().includes(searchString.toLowerCase())

【解决方案4】：

const filterUser = users.filter(user =>{ return user.office.toLowerCase().includes((searchField).toLowerCase()) });

您的 searchField 是输入的值，现在可以使用 filteruser，因为它将返回搜索中包含办公室名称的用户，或者如果在 searchField 中没有输入任何内容，则返回全部。

您现在可以通过 filterUser 进行映射，以便能够使用包含输入值的用户，即您的 searchField。

【讨论】：