JSFiddle - React, Tailwind, and code Playground

by msweeeeney

HTML

<div id='mydiv'></div>

JavaScript

function tableMarkupFromObjectArray(obj) {

      let headers = `
      <th>Index</th>
      ${Object.keys(obj[0]).map((col) => {
        return `<th>${col}</th>`
      }).join('')}`

      let content = obj.map((row, idx) => {
        return `<tr>
          <td>${idx}</td>
          ${Object.values(row).map((datum) => {
          return `<td>${datum}</td>`
        }).join('')}
        </tr>
    `}).join('')

      let tablemarkup = `
      <table>
        ${headers}
        ${content}
      </table>
      `
      return tablemarkup
    }


    let myobj =[
      { "name": "apple", "rel": 1.90 },
      { "name": "berry", "rel": 1.7 },
      { "name": "banana", "rel": 1.5 },
      { "name": "cherry", "rel": 1.2 }
    ]
 
    document.querySelector("#mydiv").innerHTML = tableMarkupFromObjectArray(myobj)