Javascript：将数据从数组导出到 HTML 表答案

【问题标题】：Javascript: Exporting data from an array to a HTML tableJavascript：将数据从数组导出到 HTML 表
【发布时间】：2019-04-16 15:59:12
【问题描述】：

我有一个二维字符串数组，例如：

[["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
        }
    }
}

【问题讨论】：

我编辑了它：这就是我的数组的样子。
所以应用程序总是以“Application”开头，数据库以“Database”开头，服务器以“Server”开头？
不，这只是我的例子。它们都有不同的名称：中间有空格并且总是不同的应用程序，服务器例如 124131.server.com 和数据库，例如：“Database, UIAHSD (JJJQEP)
你能展示一个带有样本预期输出的样本输入吗？目前尚不清楚sort the "applications" by database/server and show/save these databases/servers 的确切含义。
当我知道如何管理数据时，这就是我需要弄清楚的。我需要在一个表中显示哪个应用程序具有哪些服务器和数据库，然后我需要将它们与另一个服务器列表进行比较，看看它们是否在列表（数组）中。

标签： javascript arrays json html-table

【解决方案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)"
        ]
    }
}

【讨论】：

谢谢！我尝试了它并用我的符号对其进行了主题化，但是在一些应用程序之后它停止保存服务器和数据库（所以一半的应用程序及其服务器和数据库是空的......？）它只是停止保存它们
我不知道是什么原因造成的……你有什么想法吗？

【解决方案2】：

试试这个，

在您的 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>`

}

希望这会有所帮助！

【讨论】：