來自對象陣列的Javascript表格

我有類似的東西，但更大。來自對象陣列的Javascript表格

[{ 
"votes":200, 
"invalid_votes":140, 
"valid_votes":60, 
"voting_section":{"level":2, "zone1":"US", "zone2":"Delaware"} 
}, 
{ 
"votes":300, 
"invalid_votes":40, 
"valid_votes":260, 
"voting_section":{"level":3, "zone1":"US", "zone2":"California", "zone3":"Los Angeles"} 
}]

我想花幾個小時把這個數組轉換成表。

我的目標是把表中的第一列的最後區域（在本例中2區和3區）在voting_section（例如，第一列將有2行：特拉華州和洛杉磯

在該表中的標頭，我希望把所有其他屬性（票，invalid_votes，valid_votes）

的交點將用值來完成：

所以它必須是這樣的：

在這裏，我有我的代碼，到目前爲止，但我不認爲我是在一個良好的方向發展：

function createTableKeyValue2(arrObjects, parentDiv) { 
       var elTable = document.createElement("table"); 
       elTable.className = "table table-striped table-bordered"; 
       var elTableBody = document.createElement("tbody"); 
       for (var i = 0; i < arrObjects.length; i++) { 
        var elTableRow = document.createElement("tr"); 
        var elTableDataKey = document.createElement("td"); 
        elTableDataKey.innerHTML = arrObjects[i]; 
        var elTableDataValue = document.createElement("td"); 
        elTableDataValue.innerHTML = arrObjects[i]; 
        //elTableDataValue.id = arrObjects[i].key.split(' ').join('_'); 
        elTableRow.appendChild(elTableDataKey); 
        elTableRow.appendChild(elTableDataValue); 
        elTableBody.appendChild(elTableRow); 
       } 
       elTable.appendChild(elTableBody); 
       parentDiv.append(elTable); 
      } 

      var votingSection = function(zone) { 

       var voting_section = []; 
       var level = zone[0].voting_section.level; 
       for (var i = 0; i < zone.length; i++) { 
        voting_section.push(zone[i].voting_section['zone' + level]); 
       } 
       return voting_section; 
      }; 

createTableKeyValue(votingSection(zone2), resultsTableDiv);

resultTableDiv是在DOM節點。

來源

2017-05-30 Alexandru

你能表現出一定的工作？你有什麼嘗試？ –

我編輯了這個問題的代碼 – Alexandru

已經有相當一部分。以下是我爲https://stackoverflow.com/questions/44224584/adding-data-rows-dynamically-from-a-json-object-using-javascript/44224673#44224673和https：//做出答案的一個答案stackoverflow.com/questions/43648618/creating-table-like-structure-with-spanned-rows-using-css/43649959#43649959 –

您可以創建一個主函數來構建表，從中可以調用行構建函數（在遍歷數據行的同時）。我在這裏添加了一個示例。

var data = [{ 
 
    "votes":200, 
 
    "invalid_votes":140, 
 
    "valid_votes":60, 
 
    "voting_section":{"level":2, "zone1":"US", "zone2":"Delaware"} 
 
}, 
 
{ 
 
    "votes":300, 
 
    "invalid_votes":40, 
 
    "valid_votes":260, 
 
    "voting_section":{"level":3, "zone1":"US", "zone2":"California", "zone3":"Los Angeles"} 
 
}]; 
 

 
var buildTable = function(data, container){ 
 
    /* Builds one data row into a <tr> element string */ 
 
    var buildRow = function(rowData){ 
 
    return `<tr><td>${rowData.voting_section.zone2}</td><td>${rowData.votes}</td><td>${rowData.valid_votes}</td><td>${rowData.invalid_votes}</td></tr>`; 
 
    } 
 
    
 
    /* Reduces the array of row data into one string */ 
 
    var rows = data.reduce(function(rows, row){ 
 
    return rows+buildRow(row); 
 
    }, ''); 
 
    
 
    /* Creates the full table and includes the rows string */ 
 
    container.innerHTML = `<table><thead><tr><td></td><td>Votes</td><td>Valid Votes</td><td>Invalid Votes</td></tr></thead><tbody>${rows}</tbody>`; 
 
} 
 

 
var resultsTableDiv = document.getElementById('results') 
 
buildTable(data, resultsTableDiv);

<div id="results"></div>

來源

2017-05-30 23:24:01

您可以使用JavaScript的DOM對象從它的表，

myArray = [{ 
"votes":200, 
"invalid_votes":140, 
"valid_votes":60, 
"voting_section":{"level":2, "zone1":"US", "zone2":"Delaware"} 
}, 
{ 
"votes":300, 
"invalid_votes":40, 
"valid_votes":260, 
"voting_section":{"level":3, "zone1":"US", "zone2":"California", "zone3":"Los Angeles"} 
}] 

table = document.getElementById("myTable") 
    //In case is is called multiple times this forces the table to be empty 
while(table.rows[0] !== undefined) { 
    table.deleteRow(0) 
} 
    //Creates the empty cell in the top left 
row = table.insertRow(0) 
row.insertCell(0) 
pos = 0 

    //Creates the column labels 
for(var name in myArray[0]) { 
    if (name !== "voting_section") { 
     pos += 1 
     cell = row.insertCell(pos) 
     cell.innerHTML = name 
    } 
} 

    //creates the row labels, by changing how the last item is selected or what it contains you can produce a different label 
for (var i = 0; i < myArray.length; i++) { 
    row = table.insertRow(i+1) 
    lastItem = myArray[i].voting_section[Object.keys(myArray[i].voting_section)[Object.keys(myArray[i].voting_section).length - 1]] 
    row.insertCell(0).innerHTML = lastItem 
} 

    //creates the values 
pos = 0 
for(var name in myArray[0]) { 

    if (name !== "voting_section"){ 
     pos += 1 
     for (var i = 0; i < myArray.length; i++) { 
      row = table.rows[i+1] 
      cell = row.insertCell(pos) 
      cell.innerHTML = myArray[i][name] 
     } 
    } 
}

來源

2017-05-30 23:58:18 Greenflame

我理解你的問題，好像你想從voting_section提取1個區，該區域應該附加最高數字。

var data = [{ 
 
     "votes": 200, 
 
     "invalid_votes": 140, 
 
     "valid_votes": 60, 
 
     "voting_section": { 
 
     "level": 1, 
 
     "zone1": "US", 
 
     "zone2": "Delaware" 
 
     } 
 
    }, 
 
    { 
 
     "votes": 300, 
 
     "invalid_votes": 40, 
 
     "valid_votes": 260, 
 
     "voting_section": { 
 
     "level": 1, 
 
     "zone1": "US", 
 
     "zone2": "California", 
 
     "zone3": "Los Angeles" 
 
     } 
 
    } 
 
    ], 
 
    html = ""; 
 

 
function getLastZone(voting_section) { 
 
    var highestZone = { 
 
    zoneNumber: null, 
 
    zoneText: null 
 
    }; 
 
    for (var zone in voting_section) { 
 
    var checkZone = /zone(\d)/g.exec(zone); 
 
    if (checkZone) { 
 
     if (parseInt(checkZone[1]) > highestZone.zoneNumber) { 
 
     highestZone = { 
 
      zoneNumber: [checkZone[1]], 
 
      zoneText: voting_section[zone] 
 
     }; 
 
     } 
 
    } 
 
    } 
 
    return highestZone.zoneText; 
 
} 
 

 
data.forEach(function(e, i) { 
 
    html += "<tr>" + "<td>" + getLastZone(e.voting_section) + "</td>" + 
 
        "<td>" + e.votes + "</td>" + 
 
        "<td>" + e.valid_votes + "</td>" + 
 
        "<td>" + e.invalid_votes + "</td>" + "</tr>"; 
 
}) 
 

 
document.getElementById("putHere").innerHTML = html;

table { 
 
    border-collapse: collapse; 
 
    border-left: 1px solid #bbbbbb; 
 
    border-top: 1px solid #bbbbbb; 
 
} 
 
th, td { 
 
    border-right: 1px solid #bbbbbb; 
 
    border-bottom: 1px solid #bbbbbb; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Document</title> 
 

 
</head> 
 

 
<body> 
 
    <table> 
 
    <thead> 
 
     <th>Zone</th> 
 
     <th>Votes</th> 
 
     <th>Valid Votes</th> 
 
     <th>Invalid Votes</th> 
 
    </thead> 
 
    <tbody id="putHere"></tbody> 
 
    </table> 
 
</body> 
 

 
</html>

來源

2017-05-31 00:29:44 sudo

來自對象陣列的Javascript表格

回答

相關問題