JSFiddle - React, Tailwind, and code Playground

by madcapnmckay

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<!-- ko if: (Results && Results.response && Results.response.docs) -->
    <div id="search-results" data-bind="foreach: Results.response.docs">
        <pre data-bind="text: JSON.stringify(ko.toJS($root.Results.highlighting[Id()]), null, 2)"></pre>
        <pre data-bind="text: $root.Results.highlighting[Id()].Title"></pre>
    </div>
<!-- /ko -->

JavaScript

var MyViewModel = function() {
    var self = this;

    self.mapping = {
        'docs': {
            key: function(data) {
                return ko.utils.unwrapObservable(data.Id);
            }
        }
    };
    
    self.Results = ko.mapping.fromJS({
        "responseHeader": {
            "status": 0,
            "QTime": 0,
            "params": {
                "facet": "true",
                "facet.field": "System",
                "q": "testphrase",
                "rows": "1",
                "version": "2.2"
            }
        },
        "response": {
            "numFound": 0,
            "start": 0,
            "maxScore": 0.0,
            "docs": [
                {
                "Id": "2-33-200",
                "Title": "This is my test title",
                }
            ]
        },
        "facet_counts": {
            "facet_queries": {},
            "facet_fields": {
                "System": []
            },
            "facet_dates": {},
            "facet_ranges": {}
        },
        "highlighting": {
            "2-33-200": {
                "Title": [
                    "This is my <b>test</b> title"
                    ]
            }
        }
    }, self.mapping);
};


ko.applyBindings(new MyViewModel());