KnockoutJS foreach failure to print json array in HTML

Question

I have this code for my viewmodel wonder why its not printing my array in HTML (hoi = being printed properly)

$(document).ready(function() {
var MasterViewModel = function (model) {
    var self = this;
    debugger;
    self.ListOfSup = ko.observableArray([{ "Id": 1, "Name": "EpicT", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 2, "Name": "EpicT", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 3, "Name": "SuperT", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 4, "Name": "DBl", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 5, "Name": "Wins", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 6, "Name": "Oxand", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 7, "Name": "Whey", "Brand": "GS", "OriginCountry": null, "Reviews": null }]);
    self.Hoi = ko.observable("Hello Knockout");
}

var masterModel = new MasterViewModel();
ko.applyBindings(masterModel);

})

Here is the code for HTML:

<h2 data-bind="text: Hoi">Ko</h2>
<tbody data-bind="foreach: ListOfSup">
    <tr>
        <td data-bind="text: Name"></td>
        <td data-bind="text: Brand"></td>
    </tr>
</tbody>

Driving me to madness. Is my array not Json enough?

nemesv · Accepted Answer · 2016-05-19 08:51:54Z

1

You have an invalid HTML: you are missing the table elements around the tbody

In this case the browser (at least Chrome) cannot interpret the sole tbody and just removes it completely from the DOM

So the fix is very simple: add the table:

<h2 data-bind="text: Hoi">Ko</h2>
<table>
  <tbody data-bind="foreach: ListOfSup">
      <tr>
          <td data-bind="text: Name"></td>
          <td data-bind="text: Brand"></td>
      </tr>
  </tbody>
</table>

Demo JSFiddle.

answered May 19, 2016 at 8:51

nemesv

140k16 gold badges424 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Viking Over a year ago

Thanks for your solution!

Collectives™ on Stack Overflow

KnockoutJS foreach failure to print json array in HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related