CODEWITHSUNDEEP
javascriptjqueryknockout.js
Etienne Noël
Etienne Noël

Reputation: 6166

Knockout table bindings with an object

I have a javascript object that I want to bind to a table using KnockoutJS

Here's my object:

var data = {
  "Warnings": {
    "numbers": 30,
    "content": [
      {
        "number" : 3001,
        "description" : "There may be a problem with the device you are using if you use the default profile"
      },
        {
        "number" : 3002,
        "description" : "There may be a problem with the device you are using if you don't use the default profile"
      }
    ]
  },
  "Errors": {
    "numbers": 20,
    "content": [
      {
        "number": 1000,
        "description": "No network is loaded"
      },
        {
        "number": 1000,
        "description": "No network is loaded"
      }
    ]
  }
};
ko.applyBindings(data);

Here's my html code:

<table class="table table-hover">
    <thead>
       <tr>
           <th style="width:100px">Numero</th>
           <th>Description</th>
       </tr>
    </thead>
    <tbody data-bind="foreach: Warnings.content">
        <tr data-bind="foreach: $data">
            <td data-bind="text: $data.number"></td>
            <td data-bind="text: $data.description"></td>
        </tr>
    </tbody>
</table>

Here's a JSFiddle: http://jsfiddle.net/etiennenoel/KmKEB/

I really need to use this format for my data Object.

I don't know why I'm not having the Warnings listed in a table since I'm not getting any errors...

Upvotes: 0

Views: 190

Answers (1)

Jacob
Jacob

Reputation: 78850

You have an extra foreach that is not needed. Simply remove the foreach on your tr. The foreach on your tbody will assign a new value for $data for each tr that is rendered in the loop.

Upvotes: 2

Related Questions