首页 > 解决方案 > 按关键字过滤数组

问题描述

我正在尝试为数据表编写搜索功能,我有一个数组对象的集合,并且更愿意搜索整个对象,但现在我正在搜索某些键。下面的代码似乎无法正常工作。

我尝试了以下js:

searchResults() {

   if (!this.searchTable) this.fetch_bet_data();

   const searchableKeys = ["username", "bet_id"];

   this.bets = this.bets.filter(bet => {

      return searchableKeys.some(key => {

         return bet[key].toLowerCase().includes(this.searchTable);

      });

   });

},

所以它通过Bet_ID用户名工作。它从搜索框中获取关键字

<input type="text" v-model="searchTable" class="form-control" placeholder="Search">
   <div class="input-group-btn">
      <button class="btn btn-success" @click="searchResults()" type="submit">
         <i class="glyphicon glyphicon-search"></i>
      </button>
   </div>

理想世界我只想搜索整个对象,但现在只要让它在我声明的东西上工作就会很棒

对象示例:

bet_amount: "0.0000001" 
bet_id: "fe5f40-3ea93b" 
client_seed: "hash" 
created_at: 1547739644 
high: false 
multiplier: "2.00" 
nonce: 119
 profit: "-0.0000001" 
result: 
false roll: 80.82 
server_seed: "Seed is active needs to change server seed to reveal." server_seed_hash: "hash" 
threshold: 49.5 
user_id: "id" 
username: "graham"

标签: javascriptvue.jsvuejs2vue-component

解决方案


我可以通过您的方法看到一个问题。

您将过滤后的结果分配给this.bets这意味着它将继续过滤以前的过滤器。您应该将过滤后的结果分配给一个新变量。

这是一个工作示例。

let bets = [
  {
    bet_amount: "0.0000001",
    bet_id: "fe5f40-3ea93b",
    client_seed: "hash",
    username: "graham"
  },
  {
    bet_amount: "0.0000002",
    bet_id: "kjs93f-sflll0",
    client_seed: "hash",
    username: "roller"
  },
  {
    bet_amount: "0.0000003",
    bet_id: "099s99-lpap11",
    client_seed: "hash",
    username: "card"
  }
]

function searchResults() {
  //if (!this.searchTable) this.fetch_bet_data();

  const searchableKeys = ["username", "bet_id"];

  let results = bets.filter(bet => {
    return searchableKeys.some(key => {
      return bet[key].toLowerCase().includes(document.getElementById("theInput").value);
    });
  });
  console.log(results);
}
<input id="theInput" type="text" v-model="searchTable" class="form-control" placeholder="Search">
<div class="input-group-btn">
  <button class="btn btn-success" onClick="searchResults()" type="submit">
         <i class="glyphicon glyphicon-search">Search</i>
      </button>
</div>


推荐阅读