堆棧內存溢出
  簡體   English   中英

如何為從 API 獲取的數據創建搜索過濾器

[英]How to make a search filter for data fetched from an API

 原文  2021-10-15 17:31:40  5   1    javascript

問題描述

我正在嘗試為我從 API 映射和獲取的一些加密貨幣名稱創建搜索過濾器。 我想要發生的是，當用戶在搜索欄中鍵入時，將顯示與其輸入匹配的加密名稱。 我遇到的第一個問題是我想使用“.filter”方法，但該數據不在數組中，所以我不能這樣做。 有沒有另一種方法可以制作一個搜索欄，根據用戶輸入顯示加密貨幣的名稱？

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="style.css">
    <title>Document</title>
</head>
<body>
  <h1 class="title">Crytpo Currencies</h1></div>
  <div action=""><input placeholder= "Search for Crypto"type="text" name="searchbar" id="searchbar"></div>
  <ul class="subtitles">
      <li class="symbol-title">Symbol</li>
      <li class="name-title">Name</li>
      <li class="price-title">Price</li>
  </ul>
  <div class="dataaa"></div>
</body>

<script src="main.js"></script>
</html>

CSS：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: white;
}
body{
    background-color: #1a1a1a;
    overflow-x: hidden;
}
::-webkit-scrollbar{
    width: 0.8vw;
}
::-webkit-scrollbar-track{
    background-color: #1a1a1a ;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient( transparent, rgb(0, 255, 136));
    height: 100px;
    border-radius: 5px;
}
.title{
    text-align: center;
    font-size: 4rem;
    margin-bottom: 2em;
    margin-top: 0.5em;
}
#searchbar{
    margin-left: 80%;
    margin-bottom: 5em;
    background-color: #1a1a1a;
    outline: none;
    border: white solid 1px;
    padding: 1em;
    color: white;
    font-size: 1rem;
    font-weight: bold;
}
::placeholder{
    color: white;
    font-size: 1rem;
    font-weight: bold;
}
.dataaa{
    display: flex;
    flex-direction: column;
}
.pieceofdata{
    width: 100vw;
    border: 2px rgb(0, 255, 136) solid;
    display: flex;
    padding: 1em 0em;
    justify-content: space-around;
}
.subtitles{
    display: flex;
    width: 100vw;
    justify-content: space-around;
}
li{
    list-style: none;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.8em;
    border-bottom: 2px solid rgb(0, 255, 136) ;
}
.symbol{
    color: lime;
    font-size: 2.5rem;
}
.name{
    justify-self: normal;
}
.price{

}

爪哇腳本：

let elements = document.querySelector(".elements");
let dataaa = document.querySelector(".dataaa");
let searchbar = document.getElementById("searchbar");



function getdata() {
    fetch(
    'https://data.messari.io/api/v1/assets?fields=id,slug,symbol,metrics/market_data/price_usd'
  )
    .then((response) => {
      const data = response.json();
      return data;
    })
    .then((data) => {
      const html = data.data
        .map((pieceofdata) => {
          //VARIABLES OF DATA
          const name = pieceofdata.slug;
          const symbol = pieceofdata.symbol;
          const price = +pieceofdata.metrics.market_data.price_usd.toFixed(2);


          //HERE IS THE SEARCHBAR FUNCTION I AM HAVING ISSUES WITH ↓


          searchbar.addEventListener('keyup', function(e){
            let currentword = e.target.value
            if(name.includes(currentword)){
            dataaa.innerHTML = `<div class="pieceofdata"><h1 class= "symbol"> ${symbol}</h1><h1 class= "name"> ${name}</h1><h1 class="price"> $${price}</h1>
            </div>`;
            }
            else{
              dataaa.innerHTML = `<div class="pieceofdata"><h1 class= "symbol"> </h1><h1 class= "name"></h1> <h1 class="name">No Results Found</h1> <h1 class= "price"></h1>
              </div>`;
            }
          })
          
          return `<div class="pieceofdata"><h1 class= "symbol"> ${symbol}</h1><h1 class= "name"> ${name}</h1><h1 class= "price"> $${price}</h1>
            </div>`;
        })
      dataaa.innerHTML = html;

    });
}


getdata();

1 個解決方案

解決方案1
 2  2021-10-15 17:53:12

Separate搜索字段的event listener器與 API 調用Separate 。 另外，需要存儲API調用數據(dataStore) ，方便以后搜索時訪問。 我試圖以盡可能多的方式分離您的所有代碼。 過濾器將根據name工作。 

 let elements = document.querySelector(".elements"); let dataaa = document.querySelector(".dataaa"); let searchbar = document.getElementById("searchbar"); let dataStore = []; getdata(); function getdata() { fetch( 'https://data.messari.io/api/v1/assets?fields=id,slug,symbol,metrics/market_data/price_usd' ) .then((response) => { const data = response.json(); return data; }) .then((data) => { dataStore = data.data; dataaa.innerHTML = getHTML(data.data); }); } function getHTML(data){ return data.map(({slug, symbol, metrics}) => generateHTML(slug, symbol, metrics)).join(''); } function generateHTML(name, symbol, {market_data: { price_usd }}){ return `<div class="pieceofdata"><h1 class= "symbol"> ${symbol}</h1><h1 class= "name"> ${name}</h1><h1 class= "price"> $${+price_usd.toFixed(2)}</h1> </div>`; } function noResultHTML(){ return `<div class="pieceofdata"><h1 class= "symbol"> </h1><h1 class= "name"></h1> <h1 class="name">No Results Found</h1> <h1 class= "price"></h1> </div>`; } searchbar.addEventListener('keyup', function(e){ const currentword = e.target.value; const filteredData= dataStore.filter(o => o.slug.includes(currentword)); dataaa.innerHTML = filteredData.length ? getHTML(filteredData) : noResultHTML(); });
 *{ padding: 0; margin: 0; box-sizing: border-box; color: white; } body{ background-color: #1a1a1a; overflow-x: hidden; } ::-webkit-scrollbar{ width: 0.8vw; } ::-webkit-scrollbar-track{ background-color: #1a1a1a ; } ::-webkit-scrollbar-thumb{ background: linear-gradient( transparent, rgb(0, 255, 136)); height: 100px; border-radius: 5px; } .title{ text-align: center; font-size: 4rem; margin-bottom: 2em; margin-top: 0.5em; } #searchbar{ margin-left: 80%; margin-bottom: 5em; background-color: #1a1a1a; outline: none; border: white solid 1px; padding: 1em; color: white; font-size: 1rem; font-weight: bold; } ::placeholder{ color: white; font-size: 1rem; font-weight: bold; } .dataaa{ display: flex; flex-direction: column; } .pieceofdata{ width: 100vw; border: 2px rgb(0, 255, 136) solid; display: flex; padding: 1em 0em; justify-content: space-around; } .subtitles{ display: flex; width: 100vw; justify-content: space-around; } li{ list-style: none; font-size: 2rem; font-weight: bold; margin-bottom: 0.8em; border-bottom: 2px solid rgb(0, 255, 136) ; } .symbol{ color: lime; font-size: 2.5rem; } .name{ justify-self: normal; } .price{ }
 <!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="style.css">--> <title>Document</title> </head> <body> <h1 class="title">Crytpo Currencies</h1></div> <div action=""><input placeholder= "Search for Crypto"type="text" name="searchbar" id="searchbar"></div> <ul class="subtitles"> <li class="symbol-title">Symbol</li> <li class="name-title">Name</li> <li class="price-title">Price</li> </ul> <div class="dataaa"> </body> <!--<script src="main.js"></script>--> </html>

暫無
暫無

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

相關問題 如何訪問從 API 獲取的數據 如何使用從 API 獲取的數據填寫表格？ 如何呈現從API獲取的數據 如何使用 JavaScript 保存從 API 獲取的數據 如何過濾獲取的 JSON 數據？ 無法使用獲取的數據根據輸入值進行搜索。 收到過濾器錯誤 如何使用 API 數據中的 Vue js 創建搜索過濾器？ 組織從 api 獲取的數據 從 API 獲取的補丁數據 如何使用從另一個 API 獲取的數據獲取數據？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM