Databases
StackOverflow2013
Postsdbo
POHow to bind inner array in a table with knockout
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to bind inner array in a table with knockout
    text
    copied!<p><b>Update: </b>It seems I forgot the most important piece of information. This wasn't in an html file, but in an xsl file. The ko comment tags were being stripped out which is why the 'Name' did not exist. I'll mark Damien's response as the answer to give him credit for leading me in the right direction by going to JSFiddle. Thanks.</p> <p>Original Question:</p> <p>Is there any way to bind an inner array from a JSON object in a table with knockout.js? I have tried so many different ways, and none of them seem to work. There are two similar questions:</p> <p><a href="https://stackoverflow.com/questions/12902224/knockout-array-of-arrays">Knockout Array of Arrays</a></p> <p><a href="https://stackoverflow.com/questions/12706015/binding-nested-array-using-knockout-foreach">Binding Nested Array Using Knockout foreach</a></p> <p>But, in both cases they are using container binding. I need to use containerless binding, which doesn't seem to work.</p> <p>Here is a simplified code example:</p> <pre> var reportData = {[ "Category": "First Category", "Id": 1, "Items": [ {"Name": "First Name"}, {"Name": "Second Name"} ] }, { "Category": "Second Category", "Id": 2, "Items": [ {"Name": "First Name"}, {"Name": "Second Name"} ] }]; </pre> <p>The binding code is basic (excerpt):</p> <pre> var viewModel = function() { var self = this; self.reportData = ko.observableArray(); } var vm = new viewModel(); vm.reportData(data); ko.applyBindings(vm); </pre> <p>What I need is:</p> <pre> &lt;tbody data-bind="foreach: reportData"&gt; &lt;tr&gt; &lt;td data-bind="text: Category"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;!-- ko foreach: Items --&gt; &lt;tr&gt; &lt;td data-bind="text: Name"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;!-- /ko --&gt; &lt;/tbody&gt; </pre> <p>I have tried many different ways to get to the inner array data, but I always get the error that 'Name' is not defined. I'm confirming in the console that I'm getting the correct data, and the outer object array values display with no problem.</p> <p>What is the proper way of accessing this inner array, and displaying in a table with containerless binding for the inner array?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload