[英]Javascript: Exporting data from an array to a HTML table
我有一個二維數組的字符串,如:
[["Application1", "11106.exampleserver.com", "11109.exampleserver.com", "11102.exampleserver.com", "11105.exampleserver.com" "Database, AFPUOR(KNAJKLD)", "Database, UOQZRNJ(LKUJD)" ],
["Application2", "44407.exampleserver.com", "11106.exampleserver.com", "11104.exampleserver.com", "Database, POJPR (OIUOLWA) ", "Database, UIAHSD (JJJQEP)" ],...]
等等..(每次不同數量的服務器/數據庫)
如何按數據庫/服務器對“應用程序”進行排序並顯示/保存這些數據庫/服務器? 什么是管理陣列的最佳方式?
我需要一個HTML表格:在表格中輸入應用程序的名稱,然后是服務器和數據庫(我需要划分服務器和數據庫)。
現在我可以使用以下代碼輸出數據庫:
for(j=0; j < columns.length; j++){
for(i=0;i < columns[j].length; i++){
var db = columns[j][i].match("Database")
if (db != null){
console.log("APP: " + j + ": " + columns[j][0] + " , ID: " + i + ": " + db.input)
//outpus e.g.: APP: 0: Application1, ID: 5: Database XYZ
}
}
}
和具有此代碼的服務器:
for(j=0; j < columns.length; j++){
for(i=1;i < columns[j].length; i++){
var db = columns[j][i].match("Database")
if (db == null){
console.log("APP: " + j + ": " + columns[j][0] + " , ID: " + i + ": " + columns[j][i])
//outpus e.g.: APP: 0: Application1, ID: 1: Server1.1
}
}
}
試試這個,我試圖按應用程序對數據進行分組,然后按類型:
var d = [["Application1", "11106.exampleserver.com", "11109.exampleserver.com", "11102.exampleserver.com", "11105.exampleserver.com", "Database, AFPUOR(KNAJKLD)", "Database, UOQZRNJ(LKUJD)"], ["Application2", "44407.exampleserver.com", "11106.exampleserver.com", "11104.exampleserver.com", "Database, POJPR (OIUOLWA) ", "Database, UIAHSD (JJJQEP)"]];
var data = {};
for (var i = 0; i < d.length; i++) {
data[d[i][0]] = {
Server: [],
Database: []
};
console.log(d[i][0]);
for (var j = 1; i < d[i].length; j++) {
console.log(d[i][j]);
if (typeof d[i][j] == 'undefined')
break;
if (d[i][j].match('Database')) {
data[d[i][0]]['Database'].push(d[i][j]);
} else {
data[d[i][0]]['Server'].push(d[i][j]);
}
}
}
document.write(JSON.stringify(data));
輸出:
{
"Application1": {
"Server": [
"11106.exampleserver.com",
"11109.exampleserver.com",
"11102.exampleserver.com",
"11105.exampleserver.com"
],
"Database": [
"Database, AFPUOR(KNAJKLD)",
"Database, UOQZRNJ(LKUJD)"
]
},
"Application2": {
"Server": [
"44407.exampleserver.com",
"11106.exampleserver.com",
"11104.exampleserver.com"
],
"Database": [
"Database, POJPR (OIUOLWA) ",
"Database, UIAHSD (JJJQEP)"
]
}
}
試試這個,
在你的HTML中
<table >
<thead>
<tr>
<th>Application</th>
<th>ID</th>
<th>Database</th>
<th>Server</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
在你的JavaScript中
const table = document.getElementsByTagName('tbody')[0];
data.forEach((entity,index) => {
let rowData = {}
rowData.applicationName = entity[0]
rowData.id = index
rowData.databases = []
rowData.servers = []
entity.forEach(value => {
if (value.match('Database')){
rowData.databases.push(value)
}else{
rowData.servers.push(value)
}
})
appendRow(rowData)
})
function appendRow(rowData) {
table.innerHTML += `<tr>
<td>${rowData.applicationName}</td>
<td>${rowData.id}</td>
<td>${rowData.databases.join(',')}</td>
<td>${rowData.servers.join(',')}</td>
</tr>`
}
希望這可以幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.