按关键字过滤数组

时间:2019-01-17 19:53:06

标签: javascript vue.js vuejs2 vue-component

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

我尝试了以下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"

1 个答案:

答案 0 :(得分:0)

我的方法可以解决一个问题。

您将过滤后的结果分配给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>