Knockout "with" binding, cascading dropdown, reload selected values not working

I have a knockout example, using "With" binding to create a cascading drop-down.

The Drop-down works fine, if i select the values, 4 drop-downs cascading with each corresponding select options.

However I would like to save the drop-down setup, so at a page load, i could get back the saved values, just like presetting the values.

Logging out the values the observables get by calling 'save', after selecting from drop-down. But doesn't work when calling 'loadPresetData', to simulate the data mapping into the observable selected values.

I have forked the fiddle below. http://jsfiddle.net/turrytheman/3urLenmd/

var sampleModel=[{"products":[{"name":"1948 Porsche 356-A Roadster","year":[{"name":2015,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]}]},{"name":"1948 Porsche Type 356 Roadster","year":[{"name":2014,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]},{"name":2015,"months":[{"name":"oct"},{"name":"marc"},{"name":"feb"}]}]},{"name":"1949 Jaguar XK 120","year":[{"name":2019,"months":[{"name":"oct"},{"name":"jun"},{"name":"jul"}]},{"name":2013,"months":[{"name":"oct"},{"name":"marc"},{"name":"feb"}]}]}],"name":"Classic Cars"},{"products":[{"name":"1936 Harley Davidson El Knucklehead","year":[{"name":2011,"months":[{"name":"jan"},{"name":"nov"},{"name":"sep"}]}]},{"name":"1957 Vespa GS150","year":[{"name":2014,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]},{"name":2015,"months":[{"name":"another"},{"name":"yet"},{"name":"another"}]}]}],"name":"Motorcycles"}];


var Cascading = function() {
    var self = this;
    self.category = ko.observable();
    self.product = ko.observable();
    self.years = ko.observable();
    self.month = ko.observable();

    // Whenever the category changes, reset the product selection
    self.category.subscribe(function(val) {
       self.product(undefined);
    });
    self.product.subscribe(function(val) {
       self.years(undefined);
    });
    self.years.subscribe(function(val) {
       self.month(undefined);
    });

    // Operations
    self.loadPresetData = function() { //simulating a load, recieved from AJAX, setting saved values
        self.category(JSON.parse('{"products":[{"name":"1936 Harley Davidson El Knucklehead","year":[{"name":2011,"months":[{"name":"jan"},{"name":"nov"},{"name":"sep"}]}]},{"name":"1957 Vespa GS150","year":[{"name":2014,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]},{"name":2015,"months":[{"name":"another"},{"name":"yet"},{"name":"another"}]}]}],"name":"Motorcycles"}'));
        self.product(JSON.parse('{"name":"1936 Harley Davidson El Knucklehead","year":[{"name":2011,"months":[{"name":"jan"},{"name":"nov"},{"name":"sep"}]}]}'));
        self.years(JSON.parse('{"name":2015,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]}'));
        self.month(JSON.parse('{"name":"april"}'));
}
    self.save = function() {
        var data = {"category": ko.toJSON(ko.toJS(self.category)),
                    "product": ko.toJSON(ko.toJS(self.product)),
                    "years": ko.toJSON(ko.toJS(self.years)) ,
                    "month": ko.toJSON(ko.toJS(self.month)) 
                    }
        console.log(data);
    };
};

ko.applyBindings(new Cascading());

HTML:

<div class='liveExample'> 
   <div>
       <select data-bind='options: sampleModel, optionsText: "name", optionsCaption: "Select...", value: category'> </select>
   </div>
   <div data-bind="with: category">
       <select data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: $parent.product'> </select>
   </div>
      <div data-bind="with: product">
       <select data-bind='options: year, optionsText: "name", optionsCaption: "Select...", value: $parent.years'> </select>
   </div>
      <div data-bind="with: years">
       <select data-bind='options: months, optionsText: "name", optionsCaption: "Select...", value: $parent.month'> </select>
   </div>
   <button data-bind='click: loadPresetData'>Load</button>
   <button data-bind='click: save'>Save</button>

    <div style="color: red"data-bind="text:'Category :' + ko.toJSON(category)"></div>
    <div style="color: green"data-bind="text:'Product :' + ko.toJSON(product)"></div>
    <div style="color: blue"data-bind="text:'Year :' + ko.toJSON(years)"></div>
    <div style="color: black"data-bind="text:'Months :' + ko.toJSON(month)"></div>
</div>

Short answer: The dropdowns are not getting set because the object you are setting to self.category() and other dropdowns in loadPresetData don't exist in sampleModel (or sampleProductCategories in the fiddle).

Yes, there is an object that looks like and has the same properties and nested arrays as the object JSON.parse() creates, but they are totally different objects. They would fail a Strict Equality Comparison or "=== comparison". You can prove this hypothesis by setting the category and other cascading values from the sampleProductCategories array itself.

self.loadPresetData = function() {
   self.category(sampleProductCategories[1]);
   self.product(sampleProductCategories[1].products[0]);
   self.years(sampleProductCategories[1].products[0].year[0]);
   self.month(sampleProductCategories[1].products[0].year[0].months[0]);
};

Now, when category is updated, knockout goes and looks for this object in sampleProductCategories. It exists and hence category won't be set to undefined.

Here's an updated fiddle