JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<button id="load" type="button">Load Data</button>
<table>
    <thead>
        <tr>
            <th>drugName</th>
            <th>DosageForm</th>
            <th>Combined</th>
        </tr>
    </thead>
    <!-- data bind to span. i think IE plays nicer that way -->
    <tbody data-bind="foreach: drugList">
        <tr>
            <td><span data-bind="text: drugName"></span></td>
            <td><span data-bind="text: dosageFormDesc"></span></td>
            <td><span data-bind="text: combinedValue"></span></td>
        </tr>
    </tbody>
</table>

CSS

body {
    font-family: arial;
}
table {
    border-collapse: collapse;
}
table th, table td {
    border: 1px solid #000;
    padding: 5px;
}

table th {
    font-weight: bold;
}

JavaScript

$('#load').on('click', function() {
    var data = {
        json: JSON.stringify([{
            drugName: 'viagra',
            dosageFormDesc: 'so much'},
        {
            drugName: 'cialis',
            dosageFormDesc: 'less'}]),
        delay: 0
    };


    $.ajax({
        url: "/echo/json/",
        data: data,
        type: "POST",
        success: function(data) {
            console.log(data)
            ko.mapping.fromJS(data, mappingOptionsDefault, myViewModel.drugList);
        }
    });
});

var mappingOptionsDefault = {
    create: function(options) {
        var result = ko.mapping.fromJS(options.data);
        result.combinedValue = ko.computed(function() {
            return result.drugName() + ': ' + result.dosageFormDesc();
        }, result);
        return result;
    }
};

var myViewModel = {
    drugList: ko.observableArray() //list of drug names
};

ko.applyBindings(myViewModel);