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>
            <input id="booksearch" /><input id="btnTest" type="button" value="button" />
        </div>
        <div>
            <table id="bookresults">
                <thead>

                   <tr>
                        <th colspan="6">Books</th>

                    </tr>
                </thead>
                <tbody data-bind="foreach: model.items">
                    <tr>
                        <td><input type="button" title="Select" value="Select" /></td>
                        <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

$('#btnTest').click(function () {

        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");

    });