簡體   English   中英

根據多個值過濾 JavaScript 數組

[英]Filter JavaScript Array Based on Multiple Values

我正在嘗試根據多個條件過濾 Javascript 字典。

我嘗試執行以下步驟:

  1. 我創建了一個空字典變量

  2. 選擇輸入元素並獲取原始 HTML 節點

  3. 將更改的元素的值保存為變量

  4. 將更改的元素的 id 保存為另一個變量

  5. 有條件地將值添加到過濾器 object

     // 1. Create a variable to keep track of all the filters as an object. var filters = {}; // 3. Use this function to update the filters. function updateFilters() { // 4a. Save the element that was changed as a variable. let changedElement = d3.select(this); // 4b. Save the value that was changed as a variable. let elementValue = changedElement.property("value") console.log(elementValue); // 4c. Save the id of the filter that was changed as a variable. let filterId = changedElement.attr("id"); console.log(filterId); // 5. If a filter value was entered then add that filterId and value // to the filters list. Otherwise, clear that filter from the filters object. if (elementValue;= "") { filters[filterId] = elementValue; } else { delete filters[filterId]. } // 6; Call function to apply all filters and rebuild the table filterTable();

在下一個 function 中,我需要遍歷過濾器列表並保留與過濾器值匹配的數據。

// 7. Use this function to filter the table when data is entered.
function filterTable() {
  
  // 8. Set the filtered data to the tableData.
  let filteredData = tableData;

  // 9. Loop through all of the filters and keep any data that
  // matches the filter values


Object.entries(filters).forEach(([filterId, elementValue]) => {
  if (filters[filterId] != "") {
    filteredData = filteredData.filter(entry => entry.datetime === elementValue);

}
if (filters[filterId] != "") {
        filteredData = filteredData.filter(entry => entry.city === elementValue);

    }
if (filters[filterId] != "") {
        filteredData = filteredData.filter(entry => entry.state === elementValue);

    }
if (filters[filterId] != "") {
        filteredData = filteredData.filter(entry => entry.country === elementValue);

    }
if (filters[filterId] != "") {
        filteredData = filteredData.filter(entry => entry.shape === elementValue);

    }


};
// 10. Finally, rebuild the table using the filtered data
    buildTable(filteredData);
  }
  
  // 2. Attach an event to listen for changes to each filter
  d3.selectAll("input").on("change", updateFilters);
  
  
  // Build the table when the page loads
  buildTable(tableData);

    

界面如下所示:

過濾搜索

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css"> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">   
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <title>UFO Finder</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <link rel="stylesheet" href="static/css/style.css">
    
</head>
<body class="bg-dark">
    <div class="wrapper">
        <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
            <a class="navbar-brand" href="index.html">UFO Sightings</a>
        </nav>
        <div class="jumbotron">
            <h1 class="display-4">The Truth Is Out There</h1>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <h3>UFO Sightings: Fact or Fancy? <small>Ufologists Weigh In</small></h3>
                </div>
                <div class="col-md-8">
                    
                        
                        <p>Some Text</p>

                </div>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-3">
                            <form class="bg-dark">
                                <p>Filter Search</p>
                                <ul class="list-group bg-dark">
                                    <li class="list-group-item bg-dark">
                                        <label for="date">Enter Date</label>
                                        <input type="text" placeholder="1/10/2010" id="datetime"/>
                                    </li>
                                    
                                    <li class="list-group-item bg-dark">
                                        <label for="city">Enter a City</label>
                                        <input type="text" placeholder="roswell" id="city">
                                    </li>
                                    <li class="list-group-item bg-dark">
                                        <label for="state">Enter a State</label>
                                        <input type="text" placeholder="ca" id="state">
                                    </li>
                                    <li class="list-group-item bg-dark">
                                        <label for="Country">Enter a Country</label>
                                        <input type="text" placeholder="us" id="country">
                                    </li>
                                    <li class="list-group-item bg-dark">
                                        <label for="Shape">Enter a Shape</label>
                                        <input type="text" placeholder="crcle" id="shape">
                                    </li>
                                    <!-- <li class="list-group-item bg-dark">
                                        <button id="filter-btn" type="button" class="btn btn-dark" >Clear Table</button>
                                    </li> -->
                                </ul>
                            </form>

                        </div>
                        <div class="col-md-9">
                            <table class="table table-striped">
                                <thead>
                                    <tbody>
                                        <tr>
                                            <th>Date</th>
                                            <th>City</th>
                                            <th>State</th>
                                            <th>Country</th>
                                            <th>Shape</th>
                                            <th>Duration</th>
                                            <th>Comments</th>
                                        </tr>

                                    </tbody>
                                </thead>
                            
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
    <script type="text/javascript" src="./static/js/data.js"></script>
    <script type="text/javascript" src="./static/js/ufo_starterCode.js"></script>
</body>
</html>

數據.js

var data = [
  {
    datetime: "1/1/2010",
    city: "benton",
    state: "ar",
    country: "us",
    shape: "circle",
    durationMinutes: "5 mins.",
    comments: "4 bright green circles high in the sky going in circles then one bright green light at my front door."
  },
  {
    datetime: "1/1/2010",
    city: "bonita",
    state: "ca",
    country: "us",
    shape: "light",
    durationMinutes: "13 minutes",
    comments: "Three bright red lights witnessed floating stationary over San Diego New Years Day 2010"
  }
  ];

目標是能夠根據用戶輸入的過濾搜索條件過濾表中的記錄。 請注意,我對 Javascript 很陌生。 任何幫助表示贊賞。

由於您是 JavaScript 的新手,我建議您從基礎開始。 這意味着:盡量不使用庫和框架。 在下面的代碼片段中,我刪除了您對引導程序、D3、數據表和 jQuery 的引用,因為它們對於解決過濾表的基本問題並不是真正需要的。 這也是在 SO 中發布代碼的要求。 您應該始終嘗試提供“MCVE”(最低限度完整且可行的示例)。

我為過濾選擇了一個非常基本的概念:看到輸入字段直接對應於表的前五列,我應用了遍歷所有這些輸入的值並將它們與相應的表值進行比較的技巧。 這些值是通過在表行( <tr> )上執行forEach()循環找到的,然后確保我得到前五個<td>的“正匹配”( [...tr.children].slice(0,5) ) 的每一行。 文本比較是在每個inp.value的小寫版本(存儲在vals[I]中)和相應的td.textContent的,但前提是vals[i]不為空(否則返回正匹配,作為空的vals[i]意味着沒有對該列進行過濾)。 因此,如果所有五列( .every() -loop)都滿足“匹配”條件,則當前<tr>.style.display屬性設置為"" ,否則設置為"none"

 const data = [ { datetime: "1/1/2010", city: "benton", state: "ar", country: "us", shape: "circle", durationMinutes: "5 mins.", comments: "4 bright green circles high in the sky going in circles then one bright green light at my front door." }, { datetime: "1/1/2010", city: "bonita", state: "ca", country: "us", shape: "light", durationMinutes: "13 minutes", comments: "Three bright red lights witnessed floating stationary over San Diego New Years Day 2010" }, { datetime: "1/13/2010", city: "Bonita", state: "ca", country: "us", shape: "square", durationMinutes: "3 minutes", comments: "Early in January we saw a blue square appear right out of nowhere." }]; // fill table: const tb=document.querySelector("table tbody"); tb.innerHTML= data.map(r=>"<tr><td>"+Object.values(r).join("</td><td>")+"</td></td>").join("\n"); // filter table: const inps=[...document.querySelectorAll("ul input")]; document.querySelector("ul").addEventListener("input",ev=>{ const vals=inps.map(inp=>inp.value.toLowerCase()); // filter table according to content of first 5 columns: [...tb.children].forEach(tr=> // check for every table record: tr.style.display=[...tr.children].slice(0,5).every((td,i)=> vals[i]==="" || td.textContent.toLowerCase().includes(vals[i]) )? "": "none" // show record if vals[i]==="" or if vals[i] is part of the corresponding column contents ) })
 .table-striped tbody tr:nth-child(odd) {background-color:#ddd}
 <div class="wrapper"> <div class="jumbotron"> <h1 class="display-4">The Truth Is Out There</h1> </div> <div class="container-fluid"> <div class="row"> <div class="container-fluid"> <div class="row"> <div class="col-md-3"> <form class="bg-dark"> <p>Filter Search</p> <ul class="list-group bg-dark"> <li class="list-group-item bg-dark"> <label for="date">Enter Date</label> <input type="text" placeholder="1/10/2010" id="datetime" /> </li> <li class="list-group-item bg-dark"> <label for="city">Enter a City</label> <input type="text" placeholder="roswell" id="city"> </li> <li class="list-group-item bg-dark"> <label for="state">Enter a State</label> <input type="text" placeholder="ca" id="state"> </li> <li class="list-group-item bg-dark"> <label for="Country">Enter a Country</label> <input type="text" placeholder="us" id="country"> </li> <li class="list-group-item bg-dark"> <label for="Shape">Enter a Shape</label> <input type="text" placeholder="crcle" id="shape"> </li> <li class="list-group-item bg-dark"> <button id="filter-btn" type="button" class="btn btn-dark">Clear Table</button> </li> </ul> </form> </div> <div class="col-md-9"> <table class="table table-striped"> <thead> <tr> <th>Date</th> <th>City</th> <th>State</th> <th>Country</th> <th>Shape</th> <th>Duration</th> <th>Comments</th> </tr> </thead> <tbody></tbody> </table> </div> </div> </div> </div> </div> </div>

原始代碼試圖在循環通過過濾器時過濾數據 object; 下面的代碼實現循環通過過濾器 object,同時循環通過數據 object。
由於我的行數總是多於過濾器,因此我運行了一次 .filter 方法,而不是像我最初嘗試的那樣運行每個過濾器。

// 9. Loop through all of the filters and keep any data that matches the filter values
let filteredData = tableData.filter((obj) => {
    for(filterId in filters) {
        if(obj[filterId] !== filters[filterId]) {
          return false;
        }
    }
    return true;
  });

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM