knockout.js - Dropdowns and JSON Objects and Binding the selected value -

i'm working on data entry form made of several drop down boxes.

i load data on dropdown boxes web api call. data returned has 3 values, id, value , code. load data observablearray , can bind data dropdown box.

where i'm having problems loading value values dropdowns computed value. intially nan , make selections [object object][object object].

here example of i'm doing:

script

    var countrydata =       [{"$id":"1","code":"america","value":"a"},       {"$id":"2","code":"france","value":"f"},       {"$id":"3","code":"germany","value":"g"}]       var productdata =       [{"$id":"1","code":"product1","value":"1001"},       {"$id":"2","code":"product2","value":"1002"},       {"$id":"3","code":"product3","value":"1003"}]       var countryviewmodel = function () {          var self = this;          self.country = ko.observablearray(countrydata);         self.countryselected = ko.observable().publishon("countryselected");     };      var productviewmodel = function() {          var self = this;          self.product = ko.observablearray(productdata);         self.productselected = ko.observable().publishon("productselected");     };      var productcodemodel = function () {         this.country = ko.observable().subscribeto("countryselected");         this.product = ko.observable().subscribeto("productselected");          this.productcode = ko.computed(function() {             return this.country() + this.product();         }, this);     };      var mastervm = {         countrymodel: new countryviewmodel(),         productmodel: new productviewmodel(),         productcodemodel: new productcodemodel()     };  ko.applybindings(mastervm); 

and html

<table>     <tr>         <td><b>country:&nbsp;</b></td>         <td><select data-bind="options: countrymodel.country, optionstext: 'code', value: countrymodel.countryselected, optionscaption: 'choose...'"></select></td>     </tr>     <tr>         <td><b>product:&nbsp;</b></td>         <td><select data-bind="options: productmodel.product, optionstext: 'code', value: productmodel.productselected, optionscaption: 'choose...'"></select></td>     </tr> </table> <br /> <br /> <div>productcode</div> <div data-bind="with: productcodemodel">     <span data-bind="text: productcode"></span> </div> 

here fiddle http://jsfiddle.net/drfiasco/a6xpx/

i've looked mapping plugin can't seem work.

you need access code field of 2 obervables. splicing 2 objects together.

  this.productcode = ko.computed(function() {       if(this.country() && this.product())           return this.country().code + this.product().code;       else           return "please make selection above";   }, this); 

here fiddle http://jsfiddle.net/vmysla/a6xpx/8/