Javascript 使用knockout js将json数据从url绑定到div_Javascript_Jquery_Knockout.js

Javascript 使用knockout js将json数据从url绑定到div

javascript jquery knockout.js

Javascript 使用knockout js将json数据从url绑定到div,javascript,jquery,knockout.js,Javascript,Jquery,Knockout.js,我点击一个url并获取json数据，这些数据我想绑定到不同的div。 url中的json数据示例为 [{"CompanyCode":"17023928","LastTradedPrice":"19,849.65","Symbol":"NSE"},{"CompanyCode":"17023929","LastTradedPrice":"6,021.25","Symbol":"NIFTY"}] 在这里，我有不同符号的数据，我有两个不同的div，与symbol同名。我想将该数据绑定到div。 d

我点击一个url并获取json数据，这些数据我想绑定到不同的div。
url中的json数据示例为

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

在这里，我有不同符号的数据，我有两个不同的div，与symbol同名。我想将该数据绑定到div。
div格式为

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

对于nse，我希望nse json进行绑定，对于nifty，nifty数据进行绑定

使用下一个构造

<!-- 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 -->

您应该将

myData

定义为ajax请求之外的

viewModel

的一部分，例如

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

试试这个

<!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>


测试
$（文档）.ready（函数（）{
变量A=[{“公司代码”：“111”，“LastTradedPrice”：“11,1”，“符号”：“NSE”}，{“公司代码”：“567”，“LastTradedPrice”：“8568”，“符号”：“漂亮”}，{“公司代码”：“gjgh78”，“LastTradedPrice”：“56856”，“符号”：“NSE”}，{“公司代码”：“ghj65g”，“LastTradedPrice”：“56675”，“符号”：“漂亮”}；
$（'tblNSE，tblNIFTY'）.empty（）；
$.each（A，函数（键，值）{
如果（value.Symbol=='NSE'）{
$（'tblNSE'）.append（'公司代码：'+value.CompanyCode+'上次交易价格：'+value.LastTradedPrice+''）；
}否则{
$（'tblNIFTY'）.append（'Company Code:'+value.CompanyCode+'Last-tradedprice:'+value.Last-tradedprice+''）；
}
});
});
神经元特异性烯醇化酶


漂亮的

这是gr8的答案……对我来说很有用，但如果我传递的是静态json obj，我有一个查询，它对我来说很有用。live var数据=[{“公司代码”：“17023928”，“LastTradedPrice”：“19849.65”，“符号”：“NSE”}，{“公司代码”：“17023929”，“LastTradedPrice”：“6021.25”，“符号”：“漂亮”}]。若我想从url加载它，它会说uncaughterror：无法解析绑定，Message:ReferenceError:myData未定义。我从url获取数据的代码类似于我编写的$.getJSON视图模型（url，函数（数据）{self.myData=ko.observearray（数据）；}）；在它说数据未定义之前，我尝试过这个方法……然后我像这样定义了var data=''。现在它是说不能使用'in'运算符在at中搜索'length'file:///android_asset/www/js/knockout-2.2.0rc.debug.js:1046...... 我该怎么办…@vishalg也使用

$data.myData

而不是

myData

你能告诉我它的确切位置吗…因为在输入同样的错误后，不能使用'in'运算符在at中搜索'length'file:///android_asset/www/js/knockout-2.2.0rc.debug.js:1046Thanks @伊利亚，谢谢你帮了我…这对我很有用只需添加self.myData=ko.observatarray（ko.utils.parseJson（data）），即可实现对我的理解；

<!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>