![](/img/trans.png)
[英]how to extract values from an objects nested inside array JAVASCRIPT
[英]Extract matching values from array of objects in javascript
我有一個對象數組,我正在嘗試創建一個過濾器,其中用戶鍵入幾個字母並獲取所有匹配記錄的列表。
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,因此結果應該搜索字段 office、contact first_name 和 last_name,如果任何此類字段包含匹配的字母,則應該是請求,在這種情況下,結果輸出應該是
J Limited, James, Wilson
請幫助我實現這一目標。
要獲得匹配的用戶,您可以執行以下操作:
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)
)
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);
您可以遍歷數組並搜索對象。
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) } }
const filterUser = users.filter(user =>{ return user.office.toLowerCase().includes((searchField).toLowerCase()) });
您的 searchField 是 input 的值,現在可以使用 filteruser ,因為它將返回搜索中包含 office 名稱的用戶,或者如果 searchField 中未輸入任何內容則返回 all 。
您現在可以通過 filterUser 進行映射,以便能夠使用包含作為您的搜索字段的輸入值的用戶。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.