JSFiddle - React, Tailwind, and code Playground

by CME64

HTML

<table id="dataTable" border>
     <h2>Books</h2>

    <thead></thead>
    <tbody></tbody>
</table>

JavaScript

var JSONCollection = {
    "genres": [{
        "genre": "Horror",
            "publishers": [{
            "publisherName": "Random House",
                "authors": [{
                "authorName": "John Smith",
                    "bookDetails": [{
                    "Blurb": "Provided",
                        "Review": 3,
                        "Type": "Fiction"
                }]
            }]
        }]
    }, {
        "genre": "Romance",
            "publishers": [{
            "publisherName": "Penguin",
                "authors": [{
                "authorName": "William Shakespeare",
                    "bookDetails": [{
                    "Blurb": "Not Provided",
                        "Review": 5,
                        "Type": "Fiction"
                }]
            }]
        }]
    }]
};

var table = $('#dataTable');
var table_thead = $('#dataTable thead');
var table_tbody = $('#dataTable tbody');
var buffer="";
table_thead.html('<th>publishers</th><th>Authors</th>');

for (var i = 0; i < JSONCollection.genres.length; i++) {
    buffer+='<tr>';
    for (j = 0; j < JSONCollection.genres[i].publishers.length; j++) {
        buffer+='<td>'+JSONCollection.genres[i].publishers[j].publisherName+'</td>';
        buffer+='<td>';
        for (k = 0; k < JSONCollection.genres[i].publishers[j].authors.length; k++) {
            buffer+=(k==0?'':', ')+JSONCollection.genres[i].publishers[j].authors[k].authorName;
        }
        buffer+='</td>';
    }
    buffer+='</tr>';
        
}
table_tbody.html(buffer);