Nested dom-repeat template not showing child objects of parent query result item

[andreask1]

Description

Nested dom-repeat template doesn't loop child nodes of item from parent dom-repeat (which itself gets a query result).

I'm trying to loop "devices" in the following tree and in a nested loop all child nodes under "in":

test-data.json

{
  "devices" : {
    "dev01" : {
      "in" : {
        "gpio1" : false
      }
    },
    "dev02" : {
      "in" : {
        "gpio1" : false,
        "gpio2" : false
    }
  }
}

Expected outcome

Output: dev01 Port: gpio1 dev02 Port: gpio1 Port: gpio2

Actual outcome

Output: dev01 dev02

Steps to reproduce

1. Create a test database in your Firebase console
2. Import the test data test-data.json
3. Create a component with the example code below
4. Replace YOUR_FIREBASE... with those of your Firebase test database

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/polymerfire/firebase-app.html">
<link rel="import" href="bower_components/polymerfire/firebase-query.html">

<dom-module id="my-test">
  <template>
    <p>TEST:</p>

    <firebase-app
      name="test"
      auth-domain="YOUR_FIREBASE_AUTH_DOMAIN"
      database-url="YOUR_FIREBASE_DATABASE_URL"
      api-key="YOUR_FIREBASE_API_KEY"
    </firebase-app>
    
    <firebase-query data="{{devices}}" path="/devices"></firebase-query>
    
    <template is="dom-repeat" items="{{devices}}" as="device">
      <p>[[device.$key]]</p>
      <template is="dom-repeat" items="{{device.in}}" as="portIn">
        <p>Port: [[portIn.$key]]</p>
      </template>
    </template>
    
  </template>
  
  <script>
    Polymer({
      is: "my-test"
    });
  </script>
</dom-module>

As a workaround, I tried to put the child nodes in an array as described here: https://stackoverflow.com/questions/30981266/polymer-1-0-nested-dom-repeat-templates-cannot-show-the-content-of-a-child-obje

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/polymerfire/firebase-app.html">
<link rel="import" href="bower_components/polymerfire/firebase-query.html">

<dom-module id="my-test">
  <template>
    <p>TEST:</p>

    <firebase-app
      name="test"
      auth-domain="YOUR_FIREBASE_AUTH_DOMAIN"
      database-url="YOUR_FIREBASE_DATABASE_URL"
      api-key="YOUR_FIREBASE_API_KEY"
    </firebase-app>
    
    <firebase-query data="{{devices}}" path="/devices"></firebase-query>
    
    <template is="dom-repeat" items="{{devices}}" as="device">
      <p>[[device.$key]]</p>
      <template is="dom-repeat" items="{{arrayify(device.in)}}" as="portIn">
        <p>Port: [[portIn.$key]]</p>
      </template>
    </template>
    
  </template>
  
  <script>
    Polymer({
      is: "my-test",
      arrayify: function(obj) { return Object.keys(obj).map(function(k) { return obj[k]; }) }
    });
  </script>
</dom-module>

Now the nested template loops correctly, but the item attributes are not accessible anymore ([[portIn.$key]] is not readable, but [[portIn]] at least holds the value): Output: dev01 Port: dev02 Port: Port:

Is this a bug or am I doing something wrong?

Browsers Affected

• [x] Chrome

[isaiahnavasquez]

Thanks! I was looking for the shortest code for the arrayify! yay!

[amustafao]

+1 on this, see this on Polymer 1.0