0
天儿真好,如何使一个JSON文件的搜索查询的Javascript
所以我有了这个代码,以显示表中的一个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>