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事件，每次用户对文本框进行散焦时，它都会使用zip参数调用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>

如何在Javascript中为JSON文件进行搜索查询

1 个答案: