Using Knockout mapping for complex JSON

http://stackoverflow.com/questions/9985490/using-knockout-mapping-for-complex-json

by rniemeyer

HTML

<script src="http://knockoutjs.com/js/knockout-2.0.0.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<ul data-bind="foreach: response.docs">
    <li data-bind="html: $root.highlighting[$data].Title"></li>
</ul>

CSS

ul { margin-left: 10px; }

JavaScript

var data = {
    "response": {
        "docs": ["2-33-200","2-28-340","2-31-2042"]
    },
    "highlighting": {
        "2-33-200": {
            "Title": ["1992 <b>Toyota</b> Camry 2.2L CV Boots"]
        },
        "2-28-340": {
            "Title": ["2003 <b>Toyota</b> Matrix 2.0L Alignment"]
        },
        "2-31-2042": {
            "Title": ["1988 <b>Toyota</b> Pickup 2.4L Engine"]
        }
    }
};

var viewModel = ko.mapping.fromJS(data);

ko.applyBindings(viewModel);