JSFiddle - React, Tailwind, and code Playground

by Pratik Bhoir

HTML

<div data-bind="foreach: freqList">
    <div data-bind="text:freqname"></div>
    <div data-bind="foreach:date"> <span data-bind="text: $data"></span>,</div>
    <div>mkttp: <span data-bind="text: isindtl1.mkttp"> </span></div>
    <div>mktdesc: <span data-bind="text: isindtl1.mktdesc"> </span></div>
    <div>odpid: <span data-bind="text: isindtl1.odpid"> </span></div>
    <div>srno: <span data-bind="text: isindtl1.srno"> </span></div>
    <div>oclientid: <span data-bind="text: isindtl1.oclientid"> </span></div>
    <div>setlno: <span data-bind="text: isindtl1.setlno"> </span></div>
    <div>txnqty: <span data-bind="text: isindtl1.txnqty"> </span></div>
    <div>txndesc: <span data-bind="text: isindtl1.txndesc"> </span></div>
    <div>osetlno: <span data-bind="text: isindtl1.osetlno"> </span></div>
    <div>dorc: <span data-bind="text: isindtl1.dorc"> </span></div>
    <div>txnrefno: <span data-bind="text: isindtl1.txnrefno"> </span></div>
    <div>txndt: <span data-bind="text: isindtl1.txndt"> </span></div>
    <div>ny: <span data-bind="text: isindtl1.ny"> </span></div>
    <div>ty: <span data-bind="text: isindtl1.ty"> </span></div>
    <br />
</div>

JavaScript

var jsonString = '{ "frequency": [ { "freqid": "2", "freqname": "Monthly", "date": [ "1-02-2014", "7-02-2014", "10-02-2013", "28-03-2013" ], "isindtl1": { "mkttp": "0", "mktdesc": "", "odpid": "", "srno": "1", "oclientid": "", "setlno": "", "txnqty": "200.000", "txndesc": "Rights Issue", "osetlno": "", "dorc": "D", "txnrefno": "1001233225", "txndt": "20130924" }, "ny": "6.0", "ty": "0" }, { "freqid": "3", "freqname": "Quarterly", "date": [ "1-02-2014", "7-02-2014", "10-02-2013", "28-03-2013" ], "ny": "4.0", "ty": "0" } ] }';
console.log(JSON.parse(jsonString).frequency);

function viewModel() {

    this.freqList = ko.observableArray(JSON.parse(jsonString).frequency);
}
ko.applyBindings(new viewModel());