Dropdowns and JSON Objects and Binding the selected value

Question

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.

Vlad Mysla · Accepted Answer · 2013-07-18 01:28:03Z

1

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/

edited Jul 18, 2013 at 1:28

Vlad Mysla

1,19112 silver badges15 bronze badges

answered Jul 17, 2013 at 22:44

Dusty

6435 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dropdowns and JSON Objects and Binding the selected value

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related