CODEWITHSUNDEEP
javascriptjqueryknockout.js
vishalg
vishalg

Reputation: 437

bind json data from url to div using knockout js

I am hitting one url and getting json data , this data i want to bind to different div.
json data sample from url is 

[{"CompanyCode":"17023928","LastTradedPrice":"19,849.65","Symbol":"NSE"},{"CompanyCode":"17023929","LastTradedPrice":"6,021.25","Symbol":"NIFTY"}]

in this i have data for different symbol and i have two different div same name as symbol.I want to bind that data to div.
div format is 

<div id="nse" >
 <div id="companyCode"></div>
 <div id="TradePrice"></div>
</div>
<div id="nifty" >
  <div id="companyCode"></div>
  <div id="TradePrice"></div>
</div>

for nse i want nse json to bind and for nifty , nifty data to bind

Upvotes: 0

Views: 825

Answers (2)

Ilya
Ilya

Reputation: 29721

Use next construction 

<!-- ko foreach: myData -->
<!-- ko if : $data.Symbol === "NSE" -->
<div id="nse" >
 <span>This is NSE</span>
 <div id="companyCode" data-bind="text : $data.CompanyCode"></div>
 <div id="TradePrice"  data-bind="text : $data.LastTradedPrice"></div>
</div>
<!-- /ko -->
<!-- ko if : $data.Symbol === "NIFTY" -->
<div id="nifty" >
 <span>This is NIFTY</span>
 <div id="companyCode" data-bind="text : $data.CompanyCode"></div>
 <div id="TradePrice"  data-bind="text : $data.LastTradedPrice"></div>
</div>
<!-- /ko -->
<!-- /ko -->

JSFiddle DEMO

or you can use knockout-swith-case plugin

EDIT: 

$.getJSON(url, function (data) { 
   self.myData =ko.observableArray(data); 
})

you should define myData as part of viewModel out of ajax request e.g 

self.myData =ko.observableArray(data);   
$.getJSON(url, function (data) { 
    self.myData(data); 
})

Upvotes: 1

Lakshmana Kumar
Lakshmana Kumar

Reputation: 1249

Try this..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Testing</title>
    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            var A = [{ "CompanyCode": "111", "LastTradedPrice": "11,1", "Symbol": "NSE" }, { "CompanyCode": "567", "LastTradedPrice": "8568", "Symbol": "NIFTY" }, { "CompanyCode": "gjgh78", "LastTradedPrice": "56856", "Symbol": "NSE" }, { "CompanyCode": "ghj65g", "LastTradedPrice": "56675", "Symbol": "NIFTY"}];
            $('#tblNSE,tblNIFTY').empty();
            $.each(A, function(key, value) {
                if (value.Symbol == 'NSE') {
                    $('#tblNSE').append('<tr><td>Company Code : </td><td>' + value.CompanyCode + '</td><td>Last Traded Price : </td><td>' + value.LastTradedPrice + '</tr>');
                } else {
                    $('#tblNIFTY').append('<tr><td>Company Code : </td><td>' + value.CompanyCode + '</td><td>Last Traded Price : </td><td>' + value.LastTradedPrice + '</tr>');
                }
            });
        });

    </script>
</head>
<body>
    <div id="nse">
        <label>
            NSE
        </label>
        <table id="tblNSE">
        </table>
    </div>
    <br />
    <div id="nifty">
        <label>
            NIFTY
        </label>
        <table id="tblNIFTY">
        </table>
    </div>
</body>
</html>

Upvotes: 0

Related Questions