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>