Как поменять таблицу с вертикали на горизонталь в javascript?

Question

Мне нужны точно такие же атрибуты, но в горизонтальном виде вместо вертикального.

Здесь я просто предоставляю несколько json объектов для добавления в таблицу, чтобы посмотреть, будет ли это возможно или нет. В реальном коде у меня есть более 100 json объектов для таблицы.

Я пробовал метод Swap для этой проблемы, но я не знаю, как использовать метод swap для Json объектов.

Мой код для вертикальной таблицы приведен ниже:

var attributes = [{
    "name": "Asset #",
    "display_name": "Asset #",
    "key": "header2",
    "values": {
      "MSSBL": "4-194169767930##1-2H77NZSQ",
      "SNOW": "4-194169767930##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  },
  {
    "name": "Serial Number",
    "display_name": "Serial Number",
    "key": "header3",
    "values": {
      "MSSBL": "21256112##1-2H77NZSQ",
      "SNOW": "NA##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  },
  {
    "name": "ACCOUNT NUMBER",
    "display_name": "ACCOUNT NUMBER",
    "key": "header6",
    "values": {
      "MSSBL": "532649##1-2H77NZSQ",
      "SNOW": "NA##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  }
]

var key = [];

document.write("<table border==\"1\"><tr>");
for (key in attributes[0]) {
  document.write('<td>' + '<b>' + key + '</b>' + '</td>');
}
document.write("</tr>");
for (var i = 0; i < attributes.length; i++) {
  document.write('<tr>');
  for (key in attributes[i]) {
    document.write('<td>' + attributes[i][key] + '</td>');
  }
  document.write('</tr>');
}
document.write("</table>");

Answer 1

Небольшой повторный заказ в коде.

function demo(attributes) {
  var key = [];

  document.write("<table border==\"1\">");
  var i = 0;
  for (key in attributes[i]) {
    document.write("<tr>");
    document.write('<td>' + '<b>' + key + '</b>' + '</td>');
    while (i < attributes.length) {
      if (attributes[i][key].constructor == Object) {
        var levelDown = attributes[i][key];
        document.write('<td>');
        for(var subKey in levelDown) {
          document.write(subKey + ':' + levelDown[subKey] + '<br>');
        }
        document.write('</td>');
      } else {
        document.write('<td>' + attributes[i][key] + '</td>');
      }
      i++;
    }
    i = 0;
    document.write("</tr>");
  }
  document.write("</tr>");
document.write("</table>");
}

demo([{
    "name": "Asset #",
    "display_name": "Asset #",
    "key": "header2",
    "values": {
      "MSSBL": "4-194169767930##1-2H77NZSQ",
      "SNOW": "4-194169767930##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  },
  {
    "name": "Serial Number",
    "display_name": "Serial Number",
    "key": "header3",
    "values": {
      "MSSBL": "21256112##1-2H77NZSQ",
      "SNOW": "NA##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  },
  {
    "name": "ACCOUNT NUMBER",
    "display_name": "ACCOUNT NUMBER",
    "key": "header6",
    "values": {
      "MSSBL": "532649##1-2H77NZSQ",
      "SNOW": "NA##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  }
]);

Или использование двумерных массивов для изменения порядка данных перед генерацией таблицы.

function demo(attributes) {
  var colsData = [];

  document.write("<table border==\"1\"><tr>");
  for (key in attributes[0]) {
    colsData.push([key]);
  }
  for (var i = 0; i < attributes.length; i++) {
    var j = 0;
    for (key in attributes[i]) {
      var levelDown = attributes[i][key];
      if (attributes[i][key].constructor == Object) {
        var longList = "";
        for(var subKey in levelDown) {
          longList += subKey + ':' + levelDown[subKey] + '<br>';
        }
        levelDown = longList;
      } else longList = levelDown;
      colsData[j].push(levelDown);
      j++;
    }
  }
  for(var i=0;i<colsData.length;i++) {
    document.write("<tr><th>" + colsData[i][0] + "</th><td>" + colsData[i].slice(1).join("</td><td>") + "</td></tr>");
  }
  document.write("</table>");

}

demo([{
    "name": "Asset #",
    "display_name": "Asset #",
    "key": "header2",
    "values": {
      "MSSBL": "4-194169767930##1-2H77NZSQ",
      "SNOW": "4-194169767930##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  },
  {
    "name": "Serial Number",
    "display_name": "Serial Number",
    "key": "header3",
    "values": {
      "MSSBL": "21256112##1-2H77NZSQ",
      "SNOW": "NA##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  },
  {
    "name": "ACCOUNT NUMBER",
    "display_name": "ACCOUNT NUMBER",
    "key": "header6",
    "values": {
      "MSSBL": "532649##1-2H77NZSQ",
      "SNOW": "NA##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  }
]);

Answer 2

Попробуйте это

   function demo(attributes) {
    var key = [];

    document.write("<table border==\"1\">");
   var i = 0;
   for (key in attributes[i]) {
    document.write("<tr>");
document.write('<td>' + '<b>' + key + '</b>' + '</td>');
while (i < attributes.length) {
  if (attributes[i][key].constructor == Object) {
    var levelDown = attributes[i][key];
    document.write('<td>');
    for(var subKey in levelDown) {
      document.write(subKey + ':' + levelDown[subKey] + '<br>');
    }
    document.write('</td>');
  } else {
    document.write('<td>' + attributes[i][key] + '</td>');
  }
    i++;
   }
   i = 0;
  document.write("</tr>");
   }
    document.write("</tr>");
  document.write("</table>");
   }

      demo([{
   "name": "Asset #",
  "display_name": "Asset #",
  "key": "header2",
   "values": {
    "MSSBL": "4-194169767930##1-2H77NZSQ",
  "SNOW": "4-194169767930##1-2H77NZSQ"
},
"type": "header",
"data_type": "Text",
"editable": "N"
   },
    {
    "name": "Serial Number",
      "display_name": "Serial Number",
     "key": "header3",
     "values": {
  "MSSBL": "21256112##1-2H77NZSQ",
  "SNOW": "NA##1-2H77NZSQ"
   },
     "type": "header",
      "data_type": "Text",
     "editable": "N"
  },
  {
    "name": "ACCOUNT NUMBER",
   "display_name": "ACCOUNT NUMBER",
   "key": "header6",
    "values": {
     "MSSBL": "532649##1-2H77NZSQ",
     "SNOW": "NA##1-2H77NZSQ"
    },
   "type": "header",
   "data_type": "Text",
       "editable": "N"
     }
     ]);

Answer 3

Этого можно достичь, играя с display: flex в коде css:

var attributes = [{
    "name": "Asset #",
    "display_name": "Asset #",
    "key": "header2",
    "values": {
      "MSSBL": "4-194169767930##1-2H77NZSQ",
      "SNOW": "4-194169767930##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  },
  {
    "name": "Serial Number",
    "display_name": "Serial Number",
    "key": "header3",
    "values": {
      "MSSBL": "21256112##1-2H77NZSQ",
      "SNOW": "NA##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  },
  {
    "name": "ACCOUNT NUMBER",
    "display_name": "ACCOUNT NUMBER",
    "key": "header6",
    "values": {
      "MSSBL": "532649##1-2H77NZSQ",
      "SNOW": "NA##1-2H77NZSQ"
    },
    "type": "header",
    "data_type": "Text",
    "editable": "N"
  }
]

var key = [];

document.write("<table border==\"1\"><tr>");
for (key in attributes[0]) {
  document.write('<td>' + '<b>' + key + '</b>' + '</td>');
}
document.write("</tr>");
for (var i = 0; i < attributes.length; i++) {
  document.write('<tr>');
  for (key in attributes[i]) {
    document.write('<td>' + attributes[i][key] + '</td>');
  }
  document.write('</tr>');
}
document.write("</table>");

table {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
tbody {
  display: flex;
  width: 800px;
  position: relative;
  align-items: stretch;
  border: 1px solid black;
  
}
tr {
  flex-basis: 33.33333333%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 5px 10px; 
}
tr + tr {
  border-left: 1px solid black;
}
th, td {
  flex-basis: 100%;
  text-align: left;
  display: flex;
  padding: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
th {
  font-weight: bold;
}