JSFiddle - React, Tailwind, and code Playground

by fiddleyetu

HTML

<table border="1" cellpadding="5" cellspacing="0" id="dataTable">
    <thead>
        <tr>
            <th>Publisher</th>
            <th>Author</th>
            <th>Book Details</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

CSS

td {
    vertical-align:top;
}

JavaScript

$(function () {
    JSONCollection = {
        "genres": [{
            "genre": "Horror",
                "publishers": [{
                "publisherName": "Random House",
                    "authors": [{
                    "authorName": "John Smith",
                        "bookDetails": [{
                        "Blurb": "Provided",
                            "Review": 3,
                            "Type": "Fiction"
                    },{
                        "Blurb": "Not Provided",
                            "Review": 5,
                            "Type": "Fiction"
                    }]
                },{
                    "authorName": "John Doe",
                        "bookDetails": [{
                        "Blurb": "Provided",
                            "Review": 3,
                            "Type": "Fiction"
                    },{
                        "Blurb": "Not Provided",
                            "Review": 5,
                            "Type": "Fiction"
                    }]
                }]
            }]
        }, {
            "genre": "Romance",
                "publishers": [{
                "publisherName": "Penguin",
                    "authors": [{
                    "authorName": "William Shakespeare",
                        "bookDetails": [{
                        "Blurb": "Not Provided",
                            "Review": 5,
                            "Type": "Fiction"
                    }]
                }]
            }]
        }]
    };
    var tbody = $('#dataTable').find('tbody'),
        tr = $('<tr/>'),
        td = $('<td/>'),
        genres = JSONCollection.genres,
        row;
    $.each(genres, function(index, genre) {
        $.each(genre.publishers, function(i,publisher) {
            $.each( publisher.authors, function(j, author) {
                row = tr.clone().html( td.clone().html( publisher.publisherName ) )
                .append( td.clone().html( author.authorName )...