ユーザーがフェッチ要求の結果を検索する方法を教えてください。

私は以下のことをしました：私は10人のリストを取得するためにフェッチ要求をしました。私は、エンドユーザーが検索できるようにするために、リストから3つの要素の配列を設定しました。私が本当に望んでいるのは、エンドユーザが検索バーをクリックし、電子メールアドレスを入力し、そのデータ（電子メールアドレスに固有の）をボックスに表示させることです。ユーザーがフェッチ要求の結果を検索する方法を教えてください。

これを行うには、JavaScriptに何を入力するのかが少し分かりません。どんな助けもありがたい。私はjsfiddleの後ろにいくつかのコードを入れました。 JSのためのその後

HTML: 
    <body> 
    <div class="wrapper"> 
     <input type="search" id="myInput" placeholder="Searchbox" 
    onclick="searchFunction()" /> 
    <div class="container"> 
    <table id='myTable'> 
     <tr> 
      <td id="one">ID</td> 
      <td id="two">Name</td> 
      <td id="three">Website</td> 
      <td id="four">4</td> 
     </tr> 
     <tr> 
     <td id="five">5</td> 
     <td id="six">6</td> 
     <td id="seven">7</td> 
     <td id="eight">8</td> 
     </tr> 
    </table> 
    </div> 
</div> 
<script src="main.js"></script>

：

let items =document.getElementsByTagName("ul"); 
let input = document.getElementById("myInput"); 
let receivedData = []; 
let identifier = []; 
let name = []; 
let website = []; 

    fetch("http://jsonplaceholder.typicode.com/users") 
    .then(function(response) { 
     if (response.status !== 200) { 
     return; 
    } 
    response.json().then(function(data) { //data is present in array 
     for (let i=0; i<data.length; i++) 
     receivedData.push(data[i]); 
     console.log(receivedData); 

     for (let j=0; j<receivedData.length; j++) 
     name.push(receivedData[j].name) 
     console.log(name); 

     for (let n=0; n<receivedData.length; n++) 
     identifier.push(receivedData[n].id) 
     console.log(identifier); 

     for (let x=0; x<receivedData.length; x++) 
     website.push(receivedData[x].website) 
     console.log(website); 
    }); 
    } 
) 
.catch(function(err) { 
    console.log("Fetch Error :-S", err); 
});

は再び結果は、それはちょうど私が壁にヒットしましたHTML内の検索オプションとしてそれらを取得していますフェッチに移入されています。

jsfiddle

出典

2017-08-09 user8387535

あなたがデータをプリフェッチし、グローバル変数に保存しようとしているので、私は残りのプロセスは非常に簡単だと思う：

ユーザーが検索ボックスに何かを入力します。
入力に基づいて関連データを取得します。
テーブル内のこれらのデータを更新します。

スケルトンは次のようになります。

input.addEventListener('input', onInput, false); 

function onInput(event) { 
    const searchString = event.target.value; 
    const data = getAssociatedData(searchString); 
    updateTable(data); 
} 

function getAssociatedData(searchString) { 
    // return associated data based on the search string 
} 

function updateTable(data) { 
    // update the table through DOM api 
}

注：

あなたはinputイベントではなく、clickイベントをリッスンする必要があります。
全部response.json().then()は最初のthen()に返されなければなりません。また、その約束のチェーンでエラーが発生した場合は、catch()によってキャッチされません。

出典

2017-08-10 23:35:41 Microloft

ユーザーがフェッチ要求の結果を検索する方法を教えてください。

答えて

関連する問題