根据json创建的2d数组动态填充表

我创建了这个函数，可以用于任何二维数组:

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

由于某些原因，它不能正确工作，并且只使用person的最后一个点而不是所有点填充我的表。:/

我只需要用javascript来解决这个问题