Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FromJSONToHTMLTable</title>
    <style>
        table,th{
            border: groove;
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
        }
        td,th{
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="wrapper">
</div>
<script>
    function fromJSONToHTMLTable([json]){
        let html = "<table>\n"
        let arr = JSON.parse(json)
        html += "  <tr>"
        for (let key of Object.keys(arr[0])) {
            html += `<th>${(key)}</th>`
        }
        html += "</tr>\n"
        for (let obj of arr) {
           // TODO: print obj values in <tr><td>...</td></tr>
        }

    }
    window.onload = function(){
        let container = document.getElementById('wrapper');
        container.innerHTML = fromJSONToHTMLTable(['[{"Name":"Tomatoes & Chips","Price":2.35},{"Name":"J&B Chocolate","Price":0.96}]']);
    };
</script>
</body>
</html>