如何使用Javascript对JSON文件进行搜索查询

Question

G'day，

所以我有这段代码可以在表中显示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事件，并且每次用户使文本框散焦时，它将使用zip in参数调用您的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>