KnockoutJS: Can't get foreach to work

Question

I have an object that i am trying to loop through with foreach, but i am failing (this is what 6 months of not coding does to me...)

This works just fine:

<div data-bind="text: $root[36].partition"></div>

But the foreach not working for me.

 <div data-bind="foreach: $root">
  <div data-bind="text: $data.partition"></div>
 </div>

All I get in my html is this:

<div data-bind="foreach: $root"></div>

My viewModel is getting JSON data from php script and its structured like this: 09, 10 and 36 are partition IDs. Each partition has a 'partition' variable, which displays the name of the partition. Actual JSON structure goes deeper and this is here just for representation

top level
    09
      partition
      vip
    10
      partition
      vip
    36
      partition
      vip

This is my JS. Nothing special, I am just playing around

$(document).ready(function() {

    var viewModel = {};
    $.getJSON('/lbstat/read.php', function(data) {
        viewModel = ko.mapping.fromJS(data);
    ko.applyBindings(viewModel);
    });

});

JSON:

{"23":{
     "partition":"Prod New SVCs Partition",
     "env_dc":"Prod",
     "hosts":["server01.domain.com", "server02.domain.com"],
     "vips":{
           "124":{
               "dc_endpoint":"ADX - Prod - Intranet",
               "gw_port":"9007",
               "vip_name":"adx-prd.domain.net"
                },
           "210":{
               "dc_endpoint":"Msg - Prod - Internet",
               "gw_port":"8013",
               "vip_name":"messaging-prd.domain.com"
                 },
           "211":{
               "dc_endpoint":"Msg - Prod - Intranet",
               "gw_port":"9013",
               "vip_name":"messaging-prd.domain.net"}
              },
          }
    }

Complete JSON available here: http://pastebin.com/zpNngr53

What am I doing wrong here?

You're not entirely clear in your question, the code is incomplete. If I try to complete it, things work just fine for me, e.g. see [this fiddle](http://jsfiddle.net/jeroenheijmans/TVRHc/). — Jeroen, Jun 11 '13 at 21:07
What does the code loading your JSON look like and your code that does `ko.applyBindings`? — Matt Burland, Jun 11 '13 at 21:07
Are you sure about the outer `[` and `]` in the JSON? That doesn't match your initial statement that `$root[36].partition` works. — Niko, Jun 11 '13 at 21:37
Also: don't misuse knockout as a template engine. It comes with a more sophisticated concept than just rendering some HTML. — Niko, Jun 11 '13 at 21:40
Yes, I am aware of the KnockoutJS capabilities. And you are correct. There is no `[` and `]`. Ill update the post. — solefald, Jun 11 '13 at 21:47
Your sample is still a little rough to understand I'm afraid. What does the "23" mean, what does it stand for? The "vips" bit looks like you meant to create an array, but it's an object (`{...}`) instead, with properties "124", "210", "211". Also, the `foreach` in your view suggests you have an array, but the only array in your data is `"hosts"`? — Jeroen, Jun 11 '13 at 21:53
We do want to help, but I think you should take a bit longer to review your question and get it right in one go (as opposed to many small edits), and perhaps dig a bit through the KO documentation to see if your answer isn't already there. — Jeroen, Jun 11 '13 at 21:54
The JSON i am working with is HUGE and produced out of PHP array with `json_encode()`. Kind of hard to post it here in a readable way. `23` means Partition ID. There are multiple partitions, so there will be different numbers. I am able to reference `$root[23].partition`, as well as every other partition by its direct ID — solefald, Jun 11 '13 at 21:55
`foreach` uses `$root` to represent the main view model for the page. I would use a different variable name for your array. — Chris Pratt, Jun 11 '13 at 22:01
@chris, this is not the name of the variable. I just put it here as a re-presentation of the JSON structure. — solefald, Jun 11 '13 at 22:08

score 4 · Accepted Answer · answered Jun 11 '13 at 22:52

4

You can't foreach an object. You can only foreach an array. The JSON you posted is an object with a bunch of numbered properties, which is why $root[36] works, because 36 is the name of a property on the object, not the index of an array.

If your object was an array your code would work.

answered Jun 11 '13 at 22:52

Kyeotic

19,697
10
71
128

1

See http://stackoverflow.com/questions/14838135/how-to-use-knockout-to-iterate-over-an-object-not-array for someone else wanting to foreach over an object. There may be some helpful stuff there. – Jacob Jun 11 '13 at 22:54

KnockoutJS: Can't get foreach to work

1 Answers1