Javascript 通过从json创建的给定2d数组动态填充表
我制作了这个函数，可以用于任何二维数组：Javascript 通过从json创建的给定2d数组动态填充表,javascript,json,multidimensional-array,Javascript,Json,Multidimensional Array,我制作了这个函数，可以用于任何二维数组： GenerateTableByArray: function(tableData){ var body = document.getElementsByTagName("body")[0]; var table = document.createElement('table'); var tableBody = document
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);
}
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);
}
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);
}
Main:函数（）{
//首先我得到唯一的名字
var uniqueNames={}；
var distinctNames=[]；
for（DashboardJSON.data中的变量i）{
if（typeof（uniqueNames[DashboardJSON.data[i].name]）==“未定义”）{
distinctNames.push（DashboardJSON.data[i].name）；
}
uniqueNames[DashboardJSON.data[i].name]=0；
}
//然后是独特的日期
var uniqueDates={}；
var distinctDates=[]；
for（DashboardJSON.data中的变量i）{
if（typeof（uniqueDates[DashboardJSON.data[i].date]）==“未定义”）{
distinctDates.push（DashboardJSON.data[i].date）；
}
唯一日期[DashboardJSON.data[i].date]=0；
}
变量行=distinctNames.length+1；
var COLS=距离。长度+1；
//创建二维数组
var my2dArray=新数组（行）；
对于（var i=0；i0）{
my2dArray[i][j+1]=distinctdate[j-1]；
}
//行标题由名称数组填充
如果（j==0&&i>0）{
my2dArray[i][j]=distinctNames[i-1]；
//在这里，我需要按日期为每个人的点填充数组，但它不起作用
}else如果（i！=0&&j！=0）{
if（DashboardJSON.data[key].name==distinctNames[i-1]）{
my2dArray[i][j]=DashboardJSON.data[key].pct；
log（my2dArray[i][j]）；
}
}
}
}
}
//调用函数以生成我的表
GenerateTableByArray（my2dArray）；
}
我只需要用javascript来解决这个问题。我认为它可以完成任务 （适用于害怕标志的人）$ ，内部没有jQuery，只有JS）
var el=document.getElementById（'dbg'）；
var$l=函数（val）{
el.innerHTML=el.innerHTML+'
您还需要在内部循环中添加日期检查。更改如下：
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]);
}
变成这样：
我认为您还需要在if中添加日期检查：“if（DashboardJSON.data[key].name==distinctNames[I-1]）”。如果没有，您将在所有列中获取persons的最后一个点，因为您没有检查值是否与列的日期匹配。谢谢，伙计，真的是这样！我不知道我怎么一开始就没有想到这一点。：）另外，我生成表的函数与备用矩阵不起作用，所以我必须填写我的表首先是带空字符串的数组。现在它工作得很好。：）P.s.如果你愿意，请写下它作为答案，这样我就可以投它的票。@Nyagolova非常感谢。你的代码为我工作。谢谢你的答案，那也可以，但我想你使用jquery，因为$signs，我需要纯javascript。无论如何，很抱歉，我现在不能投它的票，但是尽快n当我获得更多声誉时，你将拥有我的+1:：）不，jQuery没有任何用处。它是纯javascript！$是我自己用来记录事情的函数！