Search code examples
knockout.jsjavascript-frameworkknockout-mapping-plugin

Data binding nested JSON with Knockoutjs


I have a JSON structure containing arrays of arrays. I have a View Model that defines objects with Observable Arrays containing Observable data, and then nesting those objects in other Arrays and Observables.

What is the simplest way to load a View Model containing nested Observable Arrays containing Observable data?

Example: http://jsfiddle.net/uyQb6/1/


Solution

  • You could explore using the mapping plugin, but the options object would get complicated as each create callback would have to call the mapping plugin again and then add any dependentObservables and it would be easier to make all of the properties observables.

    You can stick with your constructors though and use something like ko.utils.arrayMap, which is just a simple function that loops through an array and remaps each item to whatever you return from the function that you supply.

    Here is your sample with the ko.utils.arrayMap calls added: http://jsfiddle.net/rniemeyer/VUfSS/