How to use a JSON Object in polymer repeat attribute?


I'm coming to polymer from angular and I'm a little confused by the repeat function.

Does this only work with Arrays?

For instance in my code snippet below I can repeat for each value in the names var but Cannot for each entry in People var. Is this correct and just not possible OR am i missing something as I cannot seem to find anything online that clearly explains and the Documentation doesn't really give a clear explanation.

if in the Event it is as expected i.e. only works for arrays, does anyone have any suggestions as to how I might do similar for JSON Objects

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="poly-x"  attributes="">
  <template>

    <div class="container">
        <div class="row">
          {{greeting}}
        </div>
        <div class="row">
          {{people.john.name}}
        </div>
        <template repeat="{{name in names}}">
        <div class="row" >
          {{name}}
        </div>
        </template>
        <template repeat="{{person in people}}">
        <div class="row" >
          {{person.name}}
        </div>
        </template>


    </div>
    </template>
    <script>
    (function(){
        console.log('I\'m here');

    Polymer({
      greeting : '\'Allo',
      names: ['john', 'Mary', 'Sam'],

      people: {
              john: {
                name:"John Smith"
                ,address:"1 someplace, somewhere"
            },
            mary: {
                 name:"John Smith"
                ,address:"13, no luck road"
            }

      },  
      observe: {

        },
      ready: function(){   
      }
    });
  })();


  </script>
</polymer-element>

Repeat only works with arrays. This is a known issue:

https://github.com/Polymer/polymer-expressions/issues/11

You can achieve the basic effect you're looking for with a few extra steps, but there are some drawbacks. Here's a simple example with an inline function:

    <template repeat="{{person in keys(people)}}">
    <div class="row" >
      {{people[person].name}}
    </div>

Then define the function on your element prototype like this:

  keys: function(input) {
    return Object.keys(input);
  }, 

Inline function expressions are relatively new, and not in the docs yet, but they work much like filters.

You can see this code in action here:

http://jsbin.com/puhis/1/edit

Note that there are some problems with this approach: adding a new object to people doesn't cause a new row to be added. Replacing the entire people object causes the bindings to be updated, but it's inefficient if only a few items in the object changed.

If you maintain an array version of the data in the object, and mutate it when the object mutates, you could observe the array instead. This version is slightly more code, but it updates and it doesn't create or destroy extra DOM nodes when you add or remove an element:

http://jsbin.com/puhis/3/edit