Q:

Dropdowns and JSON Objects and Binding the selected value

I'm working on a Data Entry form that is made up of several drop down boxes.  
I load the data on the dropdown boxes from a Web Api call.  The data returned has 3 values, Id, Value and Code.  I load the data to a observableArray and I can bind the data to a dropdown box.  
Where I'm having problems is loading the Value values from the dropdowns to a computed value.  I intially get a NaN and as I make selections I get [object Object][object Object]. 
Here is an example of what 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 the 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 is a fiddle http://jsfiddle.net/drfiasco/A6xpX/
I've looked into the mapping plugin but I can't seem to get it to work. 

A:

You need to access the Code field of the two obervables.   Currently you are just splicing the two 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 is a fiddle http://jsfiddle.net/vmysla/A6xpX/8/

