title: Displaying nested JSON data using Knockout Mapping
body: <p>I'm trying to use Knockout's mapping plugin on a nested JSON object with variable data inside. However, I'm not sure how to get it to display in my HTML. How do I correctly map all the nested JSON objects and display it as, say, a simple string? Here is my code:</p>
  
  <p>JS</p>
  
  <pre><code>var ListModel = function(jsonData) {
    var self = this;
    self.master = ko.mapping.fromJS(jsonData);
  }
  var listModel = new ListModel(jsonData);
  ko.applyBindings(listModel);
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- ko foreach: master --&gt;
    &lt;div data-bind="text: $data"&gt;&lt;/div&gt; 
  &lt;!-- /ko --&gt;
  </code></pre>
  
  <p>Sample JSON</p>
  
  <pre><code>{"Level 1a":"Hi","Level 1b":{
    "Level 2a":"Hello","Level 2b":{
      "Level 3":"Bye"}
    }
  }
  </code></pre>
  
  <p>Sample Output</p>
  
  <pre><code>Hi
    Hello
      Bye
  </code></pre>
  
  <p>The main thing I'm trying to do here is to print out the values from all nested levels. The key values and number of nested levels are entirely variable (most of the nested JSON examples I found on SO and online were for fixed keys). Is this possible?</p>
  
  <p>Update: I found the <a href="https://stackoverflow.com/questions/8553539/jquery-json-looping-through-nested-objects">jQuery equivalent</a>, but I still need the Knockout implementation for observables.</p>