JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div data-bind="foreach: data">
       
    <h2>groupa</h2>
        <h3>foo1 - large blue</h3>
        <h3>foo2 - small red</h3>

    <hr />

</div>

JavaScript

var stuff = '[{"firstName":"fred","lastName":"bloggs"},{"firstName":"david","lastName":"frost"}]';


var stuff = '{"data": {"group":"groupa": shirts[{"foo1": {"color": "blue", "size": "large"},      "foo2": {"color": "red", "size": "small"}}]}]}';

console.log(stuff);
var data = ko.mapping.fromJSON(stuff);
console.log('data', data.shirts());
var viewModel ={};

viewModel.data=data;

ko.applyBindings(viewModel);