我制作了这个可以用于任何二维数组的函数：
GenerateTableByArray: function(tableData){
var body = document.getElementsByTagName("body")[0];
var table = document.createElement('table');
var tableBody = document.createElement('tbody');
tableData.forEach(function(rowData) {
//creating rows for the table
var row = document.createElement('tr');
row.style.backgroundColor = "#EEF4EA";
//creating cell for every row
rowData.forEach(function(cellData) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tableBody.appendChild(row);
});
//appending the generated table into the html body (with border as attribute)
table.appendChild(tableBody);
table.setAttribute("border", "1");
document.body.appendChild(table);
}
此函数适用于我传递的任何二维数组。
我遇到的问题是使用json对象中的特定值填充数组。
这是对象：
var DashboardJSON = {
"data": [
{
"name": "Person1",
"date": "2010-10-08",
"pct": 81.25
},
{
"name": "Person1",
"date": "2010-10-09",
"pct": 56.25
},
{
"name": "Person2",
"date": "2010-09-11",
"pct": 82.22
}
]
}
我需要让它看起来像这样：
|2010-10-08|2010-10-09|2010-09-11
------------------------------------------
Person1 | 81.25 | 56.25 |
Person2 | | | 82.22
这是我创建二维数组的功能：
Main: function () {
//First i get the unique names
var uniqueNames = {};
var distinctNames = [];
for( var i in DashboardJSON.data ){
if( typeof(uniqueNames[DashboardJSON.data[i].name]) == "undefined"){
distinctNames.push(DashboardJSON.data[i].name);
}
uniqueNames[DashboardJSON.data[i].name] = 0;
}
//Then the unique dates
var uniqueDates = {};
var distinctDates = [];
for( var i in DashboardJSON.data ){
if( typeof(uniqueDates[DashboardJSON.data[i].date]) == "undefined"){
distinctDates.push(DashboardJSON.data[i].date);
}
uniqueDates[DashboardJSON.data[i].date] = 0;
}
var ROWS = distinctNames.length+1;
var COLS = distinctDates.length+1;
//creating two-dimensional array
var my2dArray = new Array(ROWS);
for (var i = 0; i < my2dArray.length; i++) {
my2dArray[i] = new Array(COLS);
}
//filling the array with data
for(key in DashboardJSON.data){
for(var i = 0; i < ROWS; i++){
for(var j = 0; j < COLS; j++){
//first cell is empty
if(i==0 && j==0){
my2dArray[i][j]="";
}
//the column titles are filled from the dates array
if(i==0 && j>0){
my2dArray[i][j+1]=distinctDates[j-1];
}
//the row titles are filled with the names array
if(j==0 && i>0 ){
my2dArray[i][j]=distinctNames[i-1];
//HERE i need to populate the array with the point for each person by date but it doesn't work
} else if (i!=0 && j!=0){
if(DashboardJSON.data[key].name == distinctNames[i-1]){
my2dArray[i][j]=DashboardJSON.data[key].pct;
console.log(my2dArray[i][j]);
}
}
}
}
}
//calling the function to generate my table
GenerateTableByArray(my2dArray);
}
出于某种原因，它无法正常工作，只用最后一个点而不是所有人填充我的桌子。 ：/
我只需要使用javascript解决此问题。
答案 0 :(得分：1)
我认为它可以做到这一点。
（对于害怕符号$的人 ，里面没有jQuery，只有JS ）
var el = document.getElementById('dbg');
var $l = function(val){
el.innerHTML = el.innerHTML + '<div class="line"><pre>' + val + '</pre></div>';
}
$l('Testing sample : you can change the ordering');
var jdata = [
{
"name": "Person1",
"date": "2010-10-08",
"pct": 81.25
},
{
"name": "Person1",
"date": "2010-10-09",
"pct": 56.25
},
{
"name": "Person2",
"date": "2010-09-11",
"pct": 82.22
}
,
{
"name": "Person3",
"date": "2010-09-11",
"pct": 82.22
},
{
"name": "Person4",
"date": "2010-10-11",
"pct": 82.22
},
{
"name": "Person2",
"date": "2010-10-11",
"pct": 82.22
}
];
//jdata.sort(function(a,b){return a.pct < b.pct});
var t = { byDate : {} , byName : {}};
jdata.forEach(function(v){
var curDate = t.byDate[v.date]= t.byDate[v.date] || {};
var curName = t.byName[v.name]= t.byName[v.name] || {};
curName[v.date] = v;
});
//HERE YOU CAN CHANGE ORDERING
var COLS = Object.keys(t.byDate).sort(function(a,b){return a > b});
var ROWS = Object.keys(t.byName).sort(function(a,b){return a > b});
var my2dArray = [];
ROWS.forEach(function( rowLabel ,rowNum){
var currentRowNum = rowNum + 1;
if(rowNum===0) my2dArray[ rowNum ] = []; // colLabels
my2dArray[ currentRowNum ] = [];
COLS.forEach(function(colLabel , colNum ){
var dataValue = '-';
if(t.byName[rowLabel] && t.byName[rowLabel][colLabel]) dataValue = t.byName[rowLabel][colLabel]['pct'];
if( rowNum ===0 && colNum===0){
my2dArray[ rowNum ][colNum] = "";
} else if ( rowNum ===0 && colNum>0){
my2dArray[ rowNum ][colNum] = colLabel;
}
if ( colNum===0){
my2dArray[ currentRowNum ][colNum] = rowLabel;
} else {
my2dArray[ currentRowNum ][colNum] = dataValue;
};
});
});
$l(JSON.stringify(my2dArray , null , ' ') ).line{
border:solid 1px #CCC;
padding:3px;
margin:3px;
}<div id='dbg'></div>
答案 1 :(得分：1)
您还需要在内部循环中添加日期检查。改变：
if(DashboardJSON.data[key].name == distinctNames[i-1]){
my2dArray[i][j]=DashboardJSON.data[key].pct;
console.log(my2dArray[i][j]);
}
这样的事情：
if(DashboardJSON.data[key].name == distinctNames[i-1]
&& DashboardJSON.data[key].date == my2dArray[0][j]){
my2dArray[i][j]=DashboardJSON.data[key].pct;
console.log(my2dArray[i][j]);
}