如何通过ajax调用在敲除js中填充数据

How to populate data in knockout js through ajax call

本文关键字：js 填充 数据 何通过 ajax 调用      更新时间：2023-09-26

我有一个json对象，我正在从servlet向敲除js进行响应。我想在我写这段代码的视图模型中初始化这些数据。

success: function (data) 
{ 
    var jsondata = data['jsonObj'];
    self.PopulateStates = ko.computed(function(){
        ko.utils.arrayForEach(jsondata, function(item){
            self.States.push(new State(item));
        });
    }); 
}, 
error: function (exception) 
{ 
    alert( "fail" ); 
} 
});

作为字符串的json对象看起来像这个

{data:[{"id":"5345345","name":"dsfsdf","ssc":"","bic":"dgffdgfdg"},{"id":"123456","name":"SBI","ssc":"654321","bic":"vxvxc"}]}

js fiddle链接演示我犯了什么错？或者我需要通过映射敲除js的插件来完成它吗？

我使用这个淘汰扩展，在使用之前声明。

ko.observableArray.fn.map = function (data, Constructor) {
    var mappedData = ko.utils.forEach(data, function () {
        return new Constructor(data);
    });
    this(mappedData);
    return this;
}

然后在我的$.ajax请求中，我这样做：

success: function (data) 
{ 
    var jsondata = data['jsonObj'];
    self.PopulateStates = ko.observableArray().map(data, State);
});

你在computed中得到了结果，这不是你所需要的。

我注意到的另一件事是，您的jsondata是使用从GET返回的数据设置的。然而，您正在询问字段jsonObj的数据，看看您的JSON，似乎没有这个字段。我认为我说的是正确的，你有data作为返回项目列表的字段。

如果在您的视图模型中已经声明了self.PopulateStates，我猜您已经声明了。你可以这样做：

var State = function (data) {
    var self = this;
    self.property = ko.observable().set(data, "property");
}
var viewModel = function () {
    var self = this;
    self.PopulateStates = ko.observable();
    function getStates() {
        var request = $.ajax();
        request.done(function (data, msg) {
            if (data) self.PopulateStates.map(data, State);
        });
    }
}

如果你注意到在State模型中，我有一个self.property，它使用了一个自定义的observable函数来设置它。所有这些都是如果有数据要设置属性，就设置它。否则给它一个默认值。我还有第三个参数，当我希望它使用数据为我构建对象时，我会使用它。这就是我说的，一个联系人，具有modifiedBy属性，而这个modifiedBy是一个用户对象（或者只是一个复杂对象）

编辑

最重要的是包含jQuery，这不是一个错误，但不是必需的。Knockout是为独立于jQuery工作而构建的，因此在执行$(document).ready(function () {})以确保在DOM上加载时不需要准备就绪。这意味着如果页面不需要jQuery，就不必包含它。

这是最新的小提琴，现在可以工作了！

相关文章：