index.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <!--<script src="index.js"></script>-->
  9. <script>
  10. {
  11. const persons = [
  12. {
  13. "Name":"chevrolet chevelle malibu",
  14. "Cylinders":8,
  15. "Displacement":307,
  16. "Horsepower":130,
  17. "Weight_in_lbs":3504,
  18. "Origin":"USA"
  19. },
  20. {
  21. "Name":"buick skylark 320",
  22. "Miles_per_Gallon":15,
  23. "Cylinders":8,
  24. "Displacement":350,
  25. "Horsepower":165,
  26. "Weight_in_lbs":3693,
  27. "Acceleration":11.5,
  28. "Year":"1970-01-01",
  29. },
  30. {
  31. "Miles_per_Gallon":18,
  32. "Cylinders":8,
  33. "Displacement":318,
  34. "Horsepower":150,
  35. "Weight_in_lbs":3436,
  36. "Year":"1970-01-01",
  37. "Origin":"USA"
  38. },
  39. {
  40. "Name":"amc rebel sst",
  41. "Miles_per_Gallon":16,
  42. "Cylinders":8,
  43. "Displacement":304,
  44. "Horsepower":150,
  45. "Year":"1970-01-01",
  46. "Origin":"USA"
  47. },
  48. ]
  49. let arrColumn = [];
  50. for ( let obj of persons){
  51. for (let key in obj ){
  52. if ( !(arrColumn.includes(key)) ) {arrColumn.push(key)}
  53. }
  54. }
  55. let table = '<table>';
  56. table += '<tr>'
  57. for (let th of arrColumn){
  58. table += '<th>' + th + '</th>'
  59. }
  60. table += '</tr>'
  61. for ( let obj of persons) {
  62. table += '<tr>';
  63. for (column of arrColumn){
  64. table += '<td>'
  65. if (obj[column]) { table += obj[column] }
  66. table += '</td>'
  67. }
  68. table += '</tr>';
  69. }
  70. table += '</table>'
  71. document.write(table)
  72. }
  73. </script>
  74. </head>
  75. <body>
  76. </body>
  77. </html>