資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 JavaScript 中根據欄位值過濾物件？
概述
JavaScript 中的物件定義為一組鍵值對。它用於定義單個物件的屬性。因此，可以使用 JavaScript 根據欄位值過濾物件。透過使用 if-else 條件，我們可以根據值過濾物件。因此，要從物件中過濾，我們首先需要訪問物件的鍵，為此，我們應該事先了解物件及其操作。由於物件的操作在過濾物件欄位值中起著重要作用。
語法
下面顯示了使用值過濾物件的語法。
array.filter((p) => {
if (p.field == fieldValue) {
newArray.push(p)
}
})
陣列 - 上述語法中的陣列被稱為物件的集合。
filter() - 過濾器是一個 JavaScript 方法，它將陣列作為輸入傳遞給過濾器，並根據某些條件過濾元素。
p - 'p' 是傳遞給過濾函式的引用引數。
p.field - 使用此方法，我們可以訪問名為 'p' 的物件中的任何欄位。
fieldValue - 在上述語法中，'fieldValue' 被稱為我們必須在 JavaScript 物件中找到的值。
newArray - 它是陣列的引用，其中將包含過濾後的物件。
push() - 它是陣列的 JavaScript 方法，用於將元素插入陣列中。push() 方法將元素插入陣列的末尾。
演算法
步驟 1 - 在您的文字編輯器中建立一個 HTML 檔案，並將 HTML 基本框架新增到該檔案。
步驟 2 - 現在建立一個父 div 容器，其中包含從物件渲染的鍵值。
步驟 3 - 現在向容器中新增一個型別為文字的 input 標籤，其 id 屬性名為 "inpVal"。
<input type="text" placeholder="Filter by brand" id="inpVal">
步驟 4 - 現在新增一個 HTML 按鈕，其 onclick 事件處理程式為 "fil()"。
<button onclick="fil()">Filter</button>
步驟 5 - 現在向 div 容器中新增一個 HTML 表格，其 <tbody> 屬性中的 id 名稱為 "ans"。
<table border style="text-align: center;">
<thead>
<th>Id</th>
<th>ProductName</th>
<th>Brand</th>
</thead>
<tbody id="ans"></tbody>
</table>
步驟 6 - 現在為過濾物件的輸出建立另一個 div 容器，作為欄位值。
步驟 7 - 現在建立一個表格，用於渲染過濾後的物件。
<div>
<table border="" style="text-align: center;">
<thead>
<th>Id</th>
<th>ProductName</th>
<th>Brand</th>
</thead>
<tbody id="ans2">
<td>-</td>
<td>-</td>
<td>-</td>
</tbody>
</table>
</div>
步驟 8 - 現在將 script 標籤新增到檔案的 body 中。
<script></script>
步驟 9 - 現在建立一個空變數和一個包含物件中一些示例值的陣列。
var t = '';
var obj = [
{ ID: 1, ProductName: 'Mobile', brand: 'Samsung' },
{ ID: 2, ProductName: 'Acessories', brand: 'Samsung' },
{ ID: 3, ProductName: 'Processor', brand: 'AMD' },
{ ID: 4, ProductName: 'SSD', brand: 'Samsung' }
];
步驟 10 - 現在使用 for 迴圈迭代陣列，並使用物件訪問語法訪問物件並將其渲染到表格中。
for (let index = 0; index < obj.length; index++) {
t += `
<tr>
<td>`+ obj[index].ID + `</td>
<td>`+ obj[index].ProductName + `</td>
<td>`+ obj[index].brand + `</td>
</tr>
`
}
步驟 11 - 現在使用 DOM innerHTML 方法將物件鍵值新增到表格中。
document.getElementById("ans").innerHTML = t;
步驟 12 - 現在建立一個箭頭函式作為 file()。
fil = () => {}
步驟 13 - 將 input 標籤的值儲存在引用變數中。
var f = ``
var iVal = document.getElementById("inpVal").value;
步驟 14 - 現在使用語法從物件中查詢過濾後的值。
obj.filter((p) => {
if (p.brand == iVal) {
filteredArray.push(p)
}else{
f="No result found";
}
})
步驟 15 - 建立一個空陣列。
var filteredArray = [];
步驟 16 - 現在使用 forEach 顯示儲存在 filteredArray 中的輸出。
filteredArray.forEach(element => {
f += `
<tr>
<td>`+ element.ID + `</td>
<td>`+ element.ProductName + `</td>
<td>`+ element.brand + `</td>
</tr>
`
});
步驟 17 - 使用 HTML DOM 屬性將 HTML 資料插入表格。
document.getElementById("ans2").innerHTML = f;
示例
在此示例中，我們將從 JavaScript 物件渲染物件資料到 HTML 表格，還將新增 HTML input 標籤以根據欄位值過濾給定的物件。
<html>
<head>
<title> filter object depending on field value </title>
</head>
<body>
<div>
<h3> object rendered table (Search is case sensitive) </h3>
<input type="text" placeholder="Filter by brand" id="inpVal">
<button onclick="fil()">Filter</button>
<table border style="text-align: center;">
<thead>
<th>Id</th>
<th>ProductName</th>
<th>Brand</th>
</thead>
<tbody id="ans"></tbody>
</table>
</div>
<hr>
<div>
<h3>Filtered object depending on brand field value</h3>
<table border="" style="text-align: center;">
<thead>
<th>Id</th>
<th>ProductName</th>
<th>Brand</th>
</thead>
<tbody id="ans2">
<td>-</td>
<td>-</td>
<td>-</td>
</tbody>
</table>
</div>
<script>
var t = '';
var obj = [
{ ID: 1, ProductName: 'Mobile', brand: 'Samsung' },
{ ID: 2, ProductName: 'Acessories', brand: 'Samsung' },
{ ID: 3, ProductName: 'Processor', brand: 'AMD' },
{ ID: 4, ProductName: 'SSD', brand: 'Samsung' }
];
for (let index = 0; index < obj.length; index++) {
t += `
<tr>
<td>`+ obj[index].ID + `</td>
<td>`+ obj[index].ProductName + `</td>
<td>`+ obj[index].brand + `</td>
</tr>
`
}
document.getElementById("ans").innerHTML = t;
fil = () => {
var filteredArray = [];
var f = ``
var iVal = document.getElementById("inpVal").value;
obj.filter((p) => {
if (p.brand == iVal) {
filteredArray.push(p)
}else{
f="No result found";
}
})
filteredArray.forEach(element => {
f += `
<tr>
<td>`+ element.ID + `</td>
<td>`+ element.ProductName + `</td>
<td>`+ element.brand + `</td>
</tr>
`
});
document.getElementById("ans2").innerHTML = f;
}
</script>
</body>
</html>
下圖顯示了上述功能在其不同階段的輸出。因此，在第一張圖片中，它顯示了網頁的簡單佈局，其中包含一個用於根據值過濾物件的搜尋框和一個表格，該表格是將要過濾的物件的資料。因此，當用戶在搜尋欄位中鍵入品牌名稱並點選過濾按鈕時。使用者會根據其值從物件中獲取所有過濾後的行。如第二張和第三張圖片所示，當用戶在品牌值中輸入“Samsung”或“AMD”時，他會在新表格中獲得過濾後的資料。
在最後一張圖片中，我們可以看到，當用戶在搜尋欄位中輸入物件中不存在的值時，使用者將獲得“未找到結果”的輸出。
結論
此功能由電子商務 Web 應用程式使用，這些應用程式根據使用者輸入作為某些條件（例如產品評級、價格或質量）過濾其資料。我們還可以將此功能用於聯絡人管理系統或員工管理系統以過濾詳細資訊。這可以整合到從即時 API 過濾資料中。
357 次瀏覽
