Knockout.js Multiple Display in Nested Objects

Question

I am new to knockout.js and I don't know how to do multiple matching with my object. What is my data from the server:

var persons = { 'value': [ { "id": "1", "civility": "Mr.", "firstname": "john", "lastname": "doe", "phone": "00 00 00 00 00", "email": " [e-mail] ", "contract": [ { "id": "1", "gamme": "Gamme 1", "formula": "Formula 1" }, { "id": "2", "gamme": "Gamme 2", "formula": "Formula 2" } ] } ] } 

I am doing the first matching of the whole object and ko.computed some data:

 var person_mapping = { 'value': { create: function (options) { if (options.data != null) { return new myPersonModel(options.data); } } } } var myPersonModel = function (data) { ko.mapping.fromJS(data, {}, this); this.fullName = ko.computed(function () { return this.civility() + ' ' + this.lastname() + ' ' + this.firstname(); }, this); } 

After doing this, I get what I want for the first part:

 self.dataModel = ko.mapping.fromJS(persons, person_mapping); 

But now I want to do the same with an array of contracts inside the entities object, that is, apply the mapping and do some ko.computed as follows:

 var contract_mapping = { 'contract': { create: function (options) { if (options.data != null) { return new myContractModel(options.data); } } } } var myContractModel = function (data) { ko.mapping.fromJS(data, {}, this); this.contractName = ko.computed(function () { return this.gamme() + ' ' + this.formula(); }, this); } 

But I do not know how to apply the second display, nothing works.

Answer 1

You can apply the second display in the first line of myPersonModel . You can store display strategies in every constructor that you use.

 var myPersonModel = function(data) { ko.mapping.fromJS(data, contract_mapping, this); /* ... */ }; 

 var persons = { 'value': [{ "id": "1", "civility": "Mr.", "firstname": "john", "lastname": "doe", "phone": "00 00 00 00 00", "email": " [e-mail] ", "contract": [{ "id": "1", "gamme": "Gamme 1", "formula": "Formula 1" }, { "id": "2", "gamme": "Gamme 2", "formula": "Formula 2" } ] }] } var contract_mapping = { "contract": { create: function(options) { return new myContractModel(options.data); } } } var person_mapping = { 'value': { create: function(options) { if (options.data != null) { return new myPersonModel(options.data); } } } } var myContractModel = function(data) { ko.mapping.fromJS(data, {}, this); this.type = "myContractModel"; }; var myPersonModel = function(data) { ko.mapping.fromJS(data, contract_mapping, this); this.fullName = ko.computed(function() { return this.civility() + ' ' + this.lastname() + ' ' + this.firstname(); }, this); } console.log( ko.mapping.fromJS(persons, person_mapping) .value()[0] .contract().map(x => x.type) ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>