hw08_13_Table.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <header>
  2. <h1>Literals</h1>
  3. </header>
  4. <body>
  5. <script>
  6. </script>
  7. </body>
  8. var arr = [
  9. {
  10. "Name": "chevrolet chevelle malibu",
  11. "Cylinders": 8,
  12. "Displacement": 307,
  13. "Horsepower": 130,
  14. "Weight_in_lbs": 3504,
  15. "Origin": "USA"
  16. },
  17. {
  18. "Name": "buick skylark 320",
  19. "Miles_per_Gallon": 15,
  20. "Cylinders": 8,
  21. "Displacement": 350,
  22. "Horsepower": 165,
  23. "Weight_in_lbs": 3693,
  24. "Acceleration": 11.5,
  25. "Year": "1970-01-01",
  26. },
  27. {
  28. "Miles_per_Gallon": 18,
  29. "Cylinders": 8,
  30. "Displacement": 318,
  31. "Horsepower": 150,
  32. "Weight_in_lbs": 3436,
  33. "Year": "1970-01-01",
  34. "Origin": "USA"
  35. },
  36. {
  37. "Name": "amc rebel sst",
  38. "Miles_per_Gallon": 16,
  39. "Cylinders": 8,
  40. "Displacement": 304,
  41. "Horsepower": 150,
  42. "Year": "1970-01-01",
  43. "Origin": "USA"
  44. },
  45. ]
  46. names = Object
  47. .entries(
  48. arr.reduce(
  49. (prev, next) => {
  50. return { ...prev, ...next };
  51. }
  52. ))
  53. .map(entry => entry[0]);
  54. str = "<table>";
  55. str += "<tr>" +
  56. names
  57. .map(name => `<td>${name}</td>`)
  58. .join('') +
  59. "</tr>";
  60. str +=
  61. arr
  62. .map(obj =>
  63. `<tr>${
  64. names
  65. .map(name => `<td>${obj[name] || "-"}</td>`)
  66. .join('')
  67. }</tr>`)
  68. .join('');
  69. str += "</table>";
  70. document.write(str)