JavaScriptでJSONファイルの検索クエリを作成する方法

Question

やあ、

は、だから私はテーブル内のJSONファイルを表示するには、このコードを持っているし、それが動作します。私が知りたいことは、私はいくつかの助けをいただければ幸いです

function CreateTableFromJSON() { 
    var Data = [ 
    { 
    "Service name": "3Bridges Community Incorporated", 
    "Physical Address Line 1": "1/72 Carwar Avenue", 
    "Physical Address Suburb": "CARSS PARK", 
    "Physical Address State": "NSW", 
    "Physical Address Post Code": 2221, 
    "Care Type": "Home Care Places", 
    "Residential Places": null, 
    "Home Care Low Places": 35, 
    "Home Care High Places": 10, 
    "Transition Care Places": null 
} 
] 
    // EXTRACT VALUE FOR HTML HEADER. 
    // ('Book ID', 'Book Name', 'Category' and 'Price') 
    var col = []; 
    for (var i = 0; i < Data.length; i++) { 
     for (var key in Data[i]) { 
      if (col.indexOf(key) === -1) { 
       col.push(key); 
      } 
     } 
    } 

    // CREATE DYNAMIC TABLE. 
    var table = document.createElement("table"); 
    table.className += "alt"; 

    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. 

    var tr = table.insertRow(-1);     // TABLE ROW. 

    for (var i = 0; i < col.length; i++) { 
     var th = document.createElement("th");  // TABLE HEADER. 
     th.innerHTML = col[i]; 
     tr.appendChild(th); 
    } 

    // ADD JSON DATA TO THE TABLE AS ROWS. 
    for (var i = 0; i < Data.length; i++) { 

     tr = table.insertRow(-1); 

     for (var j = 0; j < col.length; j++) { 
      var tabCell = tr.insertCell(-1); 
      tabCell.innerHTML = Data[i][col[j]]; 
     } 
    } 

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. 
    var divContainer = document.getElementById("showData"); 
    divContainer.innerHTML = ""; 
    divContainer.appendChild(table); 
} 

テーブル（私は郵便番号で検索する）ために検索バーを追加する方法です！ここ

そして、私のHTMLです：

<div class="table-wrapper"> 
    <div id="showData"></div> 
</div> 

Answer 1

私は、テキスト入力にのonchangeイベントをやると言うだろう、とするたびに、ユーザーがテキストボックスをぼかす、それはパラメータにジップであなたのcreateTable関数を呼び出します。

function search(zip) 
 
{ 
 
    CreateTableFromJSON(zip); 
 
} 
 
function CreateTableFromJSON(zip) { 
 
    var Data = [ 
 
    { 
 
    "Service name": "3Bridges Community Incorporated", 
 
    "Physical Address Line 1": "1/72 Carwar Avenue", 
 
    "Physical Address Suburb": "CARSS PARK", 
 
    "Physical Address State": "NSW", 
 
    "Physical Address Post Code": 2221, 
 
    "Care Type": "Home Care Places", 
 
    "Residential Places": null, 
 
    "Home Care Low Places": 35, 
 
    "Home Care High Places": 10, 
 
    "Transition Care Places": null 
 
} 
 
] 
 
    //apply filter 
 
    Data=Data.filter(d=>d["Physical Address Post Code"]==zip || !zip) 
 
    // EXTRACT VALUE FOR HTML HEADER. 
 
    // ('Book ID', 'Book Name', 'Category' and 'Price') 
 
    var col = []; 
 
    for (var i = 0; i < Data.length; i++) { 
 
     for (var key in Data[i]) { 
 
      if (col.indexOf(key) === -1) { 
 
       col.push(key); 
 
      } 
 
     } 
 
    } 
 

 
    // CREATE DYNAMIC TABLE. 
 
    var table = document.createElement("table"); 
 
    table.className += "alt"; 
 

 
    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. 
 

 
    var tr = table.insertRow(-1);     // TABLE ROW. 
 

 
    for (var i = 0; i < col.length; i++) { 
 
     var th = document.createElement("th");  // TABLE HEADER. 
 
     th.innerHTML = col[i]; 
 
     tr.appendChild(th); 
 
    } 
 

 
    // ADD JSON DATA TO THE TABLE AS ROWS. 
 
    for (var i = 0; i < Data.length; i++) { 
 

 
     tr = table.insertRow(-1); 
 

 
     for (var j = 0; j < col.length; j++) { 
 
      var tabCell = tr.insertCell(-1); 
 
      tabCell.innerHTML = Data[i][col[j]]; 
 
     } 
 
    } 
 

 
    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. 
 
    var divContainer = document.getElementById("showData"); 
 
    divContainer.innerHTML = ""; 
 
    divContainer.appendChild(table); 
 
}

HTML。

<div class="table-wrapper"> 
 
    <input type="text" name="searchText" value="" onchange="search(this.value)"> 
 
    <div id="showData"></div> 
 
</div>