Question

这里我正在开发一个应用程序，通过jquery ajax检索服务器中的数据然后我用挖空做数据绑定数据json很好地传递给我的脚本唯一的问题是在我的html表中只出现一条记录这里我的json由服务器给出：

服务器返回Json：

{
    "Id": "4 ",
    " key_0 ": " 4 ",
    " Nom_Agent ": " Grace ",
    " key_1 ": " Grace ",
    " PNom_Agent ": " Malulu ",
    " key_2 ": " Malulu "
    " Sexe_Agent ",
    " M ",
    " key_3 ",
    " M ",
    " Adresse_Agent ",
    " 2 ",
    " key_4 ",
    " 2 ",
    " Telephone_Agent ": " 243 900 100 115 ",
    " key_5 ": " 243 900 100 115 "
    " Libelle_Role ": " Cashier ",
    " key_6 ": " Cashier ",
    " Email_Agent ": " gracemalulu@gmail.com ",
    " key_7 ": " gracemalulu@gmail.com ",
    " Nom_Agence ": " KIN 02 "
    " key_8 ": " 02 KIN ",
    " Libelle_Caisse ": "",
    " key_9 ": "",
    " Id_Agence ",
    " 2",
    " key_10 ",
    " 2",
    " role_id ",
    " 2",
    " key_11 "
    " 2",
    " Id_Caisse ": " ",
    " key_12 ": "",
    "Password ": " 7f59e02e7deaa6a33004b25a86024dee ",
    " key_13 ": " 7f59e02e7deaa6a33004b25a86024dee ",
    " Username": " gmalulu ",
    " key_14 ": " gmalulu "
    " Active ": " 1",
    " key_15 ": " 1 "
}, {
    " Id", " 2", " key_0 ", " 2", " Nom_Agent "
    " Vasco ", " key_1 "
    " Vasco ", " PNom_Agent "
    " Kabangu "
    " key_2 "
    " Kabangu ", " Sexe_Agent ", " M ", " key_3 ", " M ", " Adresse_Agent "
    " iSC ", " key_4 "
    " iSC ", " Telephone_Agent ": " 243 ",
    " key_5 ": " 243 ",
    " Libelle_Role ": " Agency head ",
    " key_6 ": " Agency head ",
    " Email_Agent ": " vkabungu @ ",
    " key_7 ": " vkabungu @ ",
    " Nom_Agence ": " KIN 02 ",
    " key_8 ": " KIN 02 ",
    " Libelle_Caisse ": " ",
    " key_9 ": " ",
    " Id_Agence ",
    " 2 ",
    " key_10 ",
    " 2 ",
    " role_id ",
    " 3 ",
    " key_11 ",
    " 3 ",
    " Id_Caisse ": " ",
    " key_12 ": " ",
    " Password ": " 325a2cc052914ceeb8c19016c091d2ac ",
    " key_13 ": " 325a2cc052914ceeb8c19016c091d2ac ",
    " Username ": " vkabungu ",
    " key_14 ": " vkabungu ",
    " Active ": " 1 ",
    " key_15 "
    " 1 "
}, {
    " Id", " 1", " key_0 ": " 1",
    " Nom_Agent "
    " Lepeya "
    " key_1 "
    " Lepeya "
    " PNom_Agent "
    " Otoko "
    " key_2 "
    " Otoko ",
    " Sexe_Agent ",
    " M ",
    " key_3 ",
    " M ",
    " Adresse_Agent "
    " lol122 Mombele "
    " key_4 "
    " lol122 Mombele "
    " Telephone_Agent ": " 213 ",
    " key_5 ": " 213 "
    " Libelle_Role ": " Cashier ",
    " key_6 ": " Cashier ",
    " Email_Agent ": " lepeyaherve@agb.cd ",
    " key_7 ": " lepeyaherve@agb.cd ",
    " Nom_Agence ": " KIN 02 "
    " key_8 ": " 02 KIN ",
    " Libelle_Caisse "
    " Case 01 ",
    " key_9 "
    " Case 01 ",
    " Id_Agence ",
    " 2",
    " key_10 ",
    " 2",
    " role_id "
    " 2"
    " key_11 ": " 2",
    " Id_Caisse ": " 2",
    " key_12 ": " 2",
    " Password ": " 325a2cc052914ceeb8c19016c091d2ac ",
    " key_13 ": " 325a2cc052914ceeb8c19016c091d2ac ",
    " Username": " lherve "
    " key_14 ": " lherve ",
    " Active ": " 0 ",
    " key_15 ": " 0 "
}]

脚本淘汰赛：

   <script type="text/javascript">
function Agent(data) {
    this.id=data.id;
    this.Nom_Agent=data.Nom_Agent;
    this.PNom_Agent=data.PNom_Agent;
    this.Sexe_Agent=data.Sexe_Agent;
    this.Adresse_Agent=data.Adresse_Agent;
    this.Telephone_Agent=data.Telephone_Agent;
    this.Libelle_Role=data.Libelle_Role;
    this.Email_Agent=data.Email_Agent;
    this.Nom_Agence=data.Nom_Agence;
    this.Username=data.Username;
    this.Id_Role=data.Id_Role;
    this.Id_Caisse=data.Id_Caisse;
    this.Date_Affectation=data.Date_Affectation;
    this.Libelle_Caisse=data.Libelle_Caisse;
    this.Id_Lieu=data.Id_Lieu;
    this.Active=ko.observable(data.Active)
}

function AgentListViewModel() {
    // Data
    var self = this;

    self.agents= ko.observableArray([]);
    $.ajax("/agence/allagent", {
        contentType: "application/json",
        success: function(result) {     
              var mappedAgents = $.map( result, function(item) {
                   return new Agent(item) ; });
        self.agents(mappedAgents);
    });

}

ko.applyBindings(new AgentListViewModel());

</script>

请帮帮我

Answer 1

您可以使用knockout mapping plugin

设置可观察数组

AgentListViewModel function ( ) {
var self = this;
self.agents ko.observableArray = ( [ ] ) ;

$.ajax ("/branch/allagent" {
    contentType : "application/json "
    success : function ( result) {
    ko.mapping.fromJS(result, {}, self.agents) };
     }
  });
}

我设置了一个如何使用它的例子。

Example

使用服务器Json加载Knockout observableArray只填充一个元素

1 个答案: