DEV Community

Cover image for create table from array of objects in one line of code
Frank Wisniewski
Frank Wisniewski

Posted on

create table from array of objects in one line of code

#javascript #html 
<html lang=de>
  <meta charset=UTF-8>
  <title>Document</title>
 <link rel="stylesheet" 
href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<body class=container>
  <h1>Array of objects to table</h1>
<script>
  let cities = [
  {"city": "Berlin","country": "Germany"},
  {"city": "Paris","country": "France"}]
  document.querySelector('h1').insertAdjacentHTML('afterend',
  `<table><thead><tr><th>
   ${Object.keys(cities[0]).join('<th>')}
  </thead><tbody><tr><td>${cities.map(e=>Object.values(e)
.join('<td>')).join('<tr><td>')}</table>`)
</script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)