KO Js Using in jsp with two objects

KO JS using for iterate a JSON object in JSP

When Jsp file loads in that time the two JSO objects reads and convert as a ko object

$(document)
.ready(
function() {
var payOptJson = "${paymentOpt}";
var payOptJsonreplace = payOptJson.replace(/'/g, '"');
var payOptJsonKo = ko.observableArray(JSON
.parse(payOptJsonreplace));

var paybanksJson = '${paybanks}';
var paybanksJsonreplace = paybanksJson.replace(/'/g,
'"');
var paybanksJsonKo = ko.observableArray(JSON
.parse(paybanksJsonreplace));

var policydetailsArray;
function AppViewModel() {
var self = this;

self.payOpt = payOptJsonKo;
self.paybanks = paybanksJsonKo;
}

ko.applyBindings(new AppViewModel());

});




iterate the Ko objects in JSP Using KO js


<div class="col-md-10 col-sm-10" data-bind="foreach:payOpt">

<div class="col-md-2"
style="float: left; color: #6d6e71; font-size: 12px; font-family: aria;">
<span> <input type="radio" name="paymentMode"
data-bind="attr: {value: key}" class="clickpaymentOpt" /></span> <span
data-bind="text: value"></span>
</div>



</div>
<div class="clr"></div>
<div class="col-md-10 col-sm-10">
<label for="paymentMode" class="error"></label>
</div>

<div class="col-md-10">
<div class="col-md-10" data-bind="foreach:paybanks">
<div class="col-md-10 banklistDiv" data-bind="attr: {id: Key}"
style="float: left; color: #6d6e71; font-size: 14px; font-family: arial; display: none">
<!-- ko template: {if: Key !== '7C80A008-7677-4960-8892-D607DFECE0BC' && Key !== '0F642ABC-AA5A-4B65-92ED-11E11A4D3466' } -->
<div class="col-md-10" data-bind="foreach:Values"
style="float: left; color: #6d6e71; font-size: 12px; font-family: arial; padding: 10px;">
Please select your <span data-bind="text: Type"></span> and
click on "Proceed":<label for="subtype" class="error"></label>
<div class="col-md-10" data-bind="foreach:Banks"
style="float: left; color: #6d6e71; font-size: 12px; font-family: arial;">

<div class="col-md-2"
style="float: left; color: #6d6e71; font-size: 12px; font-family: arial;">
<span><input type="radio" name="subtype"
data-bind="attr: {value: bankid}" /></span> <span
data-bind="text: bankname"></span>
</div>
</div>
</div>
<br />
<!-- /ko -->
<!-- ko template: {if: Key === '7C80A008-7677-4960-8892-D607DFECE0BC' || Key === '0F642ABC-AA5A-4B65-92ED-11E11A4D3466' } -->
<p>Please select your and click on "Proceed":</p>
<br /> <select class="fieldValue" data-bind="foreach: Values"
name="subtype" style="width: 95px;">
<optgroup data-bind="attr: {label: Type}, foreach: Banks">
<option data-bind="text: bankname, value: bankid"></option>
</optgroup>
</select>
<div class="clr"></div>
<!-- /ko -->
</div>

</div>
</div>


for that above code sample JSON files are

1)

[{"key":"F7891F05-171C-4B5A-AD52-1DB1C44B628E","value":"PM.CC"},{"key":"7C80A008-7677-4960-8892-D607DFECE0BC","value":"PM.DC"},{"key":"0F642ABC-AA5A-4B65-92ED-11E11A4D3466","value":"PM.IB"},{"key":"42D315A2-E746-4C2F-8B36-5832D24BC55A","value":"PM.W/CC"},{"key":"F21863F7-4BE0-4E29-9ED1-092335911738","value":"PM.EMI"}]



2)

[{"Key":"F21863F7-4BE0-4E29-9ED1-092335911738","Values":[{"Type":"EMI","Banks":[{"bankid":"CIT","bankname":"Credit Card 3EMI","gatewayId":"8C885DB2-C0CC-4EDD-9FFD-CC9302A03AFA","gatewayKey":"BILLDESK","paymentMethodDetailsId":"1C2F1076-C90E-4AA0-AB49-C0F5D63AD83F"}]}]},{"Key":"0F642ABC-AA5A-4B65-92ED-11E11A4D3466","Values":[{"Type":"IB","Banks":[{"bankid":"162","bankname":"Kotak Bank","gatewayId":"8C885DB2-C0CC-4EDD-9FFD-CC9302A03AFA","gatewayKey":"BILLDESK","paymentMethodDetailsId":"ACD245F8-2242-4D81-A4B9-A32B9A97AE7F"}]},{"Type":"IB","Banks":[{"bankid":"ADB","bankname":"Andhra Bank","gatewayId":"1E1D510B-97C2-47B8-B6EA-6A8C2D396A20","gatewayKey":"BOB","paymentMethodDetailsId":"268C2942-9AAA-449E-AEF8-8E999203EF7D"}]}]},{"Key":"F7891F05-171C-4B5A-AD52-1DB1C44B628E","Values":[{"Type":"CreditCard","Banks":[{"bankid":"CIT","bankname":"Visa","gatewayId":"27019A8F-3408-4AB6-86EB-B2BBA8E8D849","gatewayKey":"DIRECT","paymentMethodDetailsId":"9FF043CA-660A-43F2-A88F-7C045A8B579F"}]},{"Type":"CreditCard","Banks":[{"bankid":"AM2","bankname":"American Express","gatewayId":"AF656C11-D855-4D04-A196-F80949E93E77","gatewayKey":"BILLJUNCTION","paymentMethodDetailsId":"A5592543-2246-4E6D-B97D-A161FEEA5B9D"}]},{"Type":"CreditCard","Banks":[{"bankid":"CIT","bankname":"Diners","gatewayId":"00B06BA3-07CE-4AE8-A0CD-5DCD33005D99","gatewayKey":"PAYU","paymentMethodDetailsId":"7E64C2C0-17E8-4B95-9EAE-AD6D89D1552C"}]}]},{"Key":"42D315A2-E746-4C2F-8B36-5832D24BC55A","Values":[{"Type":"CashCard/Wallet","Banks":[{"bankid":"ATL","bankname":"Airtel Money","gatewayId":"AF656C11-D855-4D04-A196-F80949E93E77","gatewayKey":"BILLJUNCTION","paymentMethodDetailsId":"CBFD9EE0-6329-4947-BC5F-61BE50955D68"}]}]},{"Key":"7C80A008-7677-4960-8892-D607DFECE0BC","Values":[{"Type":"DebitCard","Banks":[{"bankid":"LVD","bankname":"Lakshmi Vilas Bank ATM-cum-Debit Card","gatewayId":"27019A8F-3408-4AB6-86EB-B2BBA8E8D849","gatewayKey":"DIRECT","paymentMethodDetailsId":"6EC1662F-8298-4084-8A2C-ACEDC6B48E28"}]},{"Type":"DebitCard","Banks":[{"bankid":"IOD","bankname":"Indian Overseas Bank","gatewayId":"00B06BA3-07CE-4AE8-A0CD-5DCD33005D99","gatewayKey":"PAYU","paymentMethodDetailsId":"6C0C88F2-35C6-4EB1-939E-65283520E296"}]},{"Type":"Debit/Master","Banks":[{"bankid":"PDC","bankname":"Punjab National Bank","gatewayId":"AF656C11-D855-4D04-A196-F80949E93E77","gatewayKey":"BILLJUNCTION","paymentMethodDetailsId":"7A019493-BB72-45A0-891C-DE6F86B8AFBF"}]},{"Type":"Debit/Visa","Banks":[{"bankid":"UDC","bankname":"Union Bank of India","gatewayId":"8C885DB2-C0CC-4EDD-9FFD-CC9302A03AFA","gatewayKey":"BILLDESK","paymentMethodDetailsId":"1957FDB8-8CF7-443A-96C0-A56B0196905F"}]}]}]