JSFiddle - React, Tailwind, and code Playground

by Manoj kumar Lakshman

HTML

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

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

CSS

td{
    border:1px solid
}

JavaScript

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 = table.find('thead')
                    table_thead.empty()
                    var tr_head = $('<tr>')
                       .append($('<th>').text('Publishers'))
                    .append($('<th>').text('Author'))
                       .appendTo(table_thead)
                    var table_tbody = table.find('tbody')
                    table_tbody.empty()
                    var tr_body = $('<tr>')
                    for (var i = 0; i < JSONCollection.genres.length; i++) {
                         var tr_body = $('<tr>');
                       for...