通过从 json 创建的给定二维数组动态填充表

Question

我制作的这个函数可以用于任何二维数组：

                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 来解决这个问题。

Answer 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]);
}

Answer 2

我认为它可以解决问题。

（对于那些害怕符号 $ ，里面没有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>