Question

I’m trying to create to cascade drop down lists using knockoutjs and the following data source:

[{"$id":"1",
  "Id":1,
  "Name":"Nikon",
  "Cameras":[{
       "$id":"2",
       "Id":1,
       "Name":"D90"},
      {"$id":"3",
       "Id":2,
       "Name":"D5100"},
      {"$id":"4",
       "Id":3,
       "Name":"D700"}]},
 {"$id":"5",
  "Id":2,
  "Name":"Canon",
  "Cameras":[{
       "$id":"6",
       "Id":4,
       "Name":"550D"},
      {"$id":"7",
       "Id":5,
       "Name":"600D"},
      {"$id":"8",
       "Id":6,
       "Name":"650D"}]},
 {"$id":"9",
  "Id":3,
  "Name":"Sony",
  "Cameras":[]},
 {"$id":"10",
  "Id":4,
  "Name":"Pentax",
  "Cameras":[]},
 {"$id":"11",
  "Id":5,
  "Name":"Olympus",
  "Cameras":[]},
 {"$id":"12",
  "Id":6,
  "Name":"Panasonic",
  "Cameras":[]},
 {"$id":"13",
   "Id":7,
   "Name":"Leica",
   "Cameras":[]}]

I trying to map this json to my companies object using the mapping plugin for knockoutjs:

$.getJSON(url, function (data) {
      $.each(data, function () {
        companies.push(ko.mapping.fromJS(this));
      });
});

but it seems the Cameras array is not mapped. Could you please tell me why is this happening? Thanks.

Answer 1

Wrapping your list in an object using companies as key should make your code work.

var Model = function () {
   this.companies= ko.observableArray();        
};
var model = new Model();
ko.applyBindings(model);
ko.mapping.fromJS({companies: data}, mappingOptions, model);

see this fiddle (changing value in input boxes shows that Cameras array is mapped).