JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
  <h2>Find Cat in the Hat</h2>

        <div>
            <table id="bookresults">
                <thead>

                   <tr>
                        <th colspan="1">Title</th>
                        <th colspan="1">Books</th>
                        <th colspan="1">Reference</th>
                        <th colspan="1">Art</th>
                        <th colspan="1">Cover</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: model.items">
                    <tr>
                        
                        <td data-bind="text: volumeInfo.title"></td>
                        <td data-bind="text: volumeInfo.description"></td>
                        <td><table><tbody><!-- ko foreach: volumeInfo.industryIdentifiers --><tr><td data-bind="text: identifier"></td></tr><!-- /ko --></tbody></table></td>
                        <td><table><tbody><!-- ko foreach: volumeInfo.categories --><tr><td data-bind="text: $data"></td></tr><!-- /ko --></tbody></table></td>
                        <td><table><tbody><tr><td><img data-bind="attr: {src: volumeInfo.imageLinks.thumbnail}" /></td></tr></tbody></table></td>

                    </tr>

                    <tr>
                    </tr>

                </tbody>
            </table>
        </div>

JavaScript

var url = "https://www.googleapis.com/books/v1/volumes?q=the+Cat+In+The+Hat";
        var viewModel = {};
        $.getJSON(url, function (data) {

            viewModel.model = ko.mapping.fromJS(data);
            ko.applyBindings(viewModel);

        });

        //Show the results after selected
        $('#bookresults').css("display", "block");