How do you use iron-list with array with sub-arrays

Question

I'm using JSON data retrieved back in this format. This is a sample of the data I'll get. Basically I've done it without using iron list, with just repeats inside repeats 3 levels deep. But I'm experiencing performance issues and am wondering if iron-list would help.

First level anchor groups will be in iron-collapse (user collapsible), in each group will then have a paper-card for each of the anchors with a header. Below the header is another iron-collapse which will list the routes.

Looking at iron-list examples, it looks like it's 1 dimensional.

anchor group
  -> anchor
      ->route
      ->route
anchor group
  -> anchor
      ->route
      ->route

This is a sample of how the display should look like.

[ 
    {
        "anchors":[ 
            {"anchorid":1, 
             "routes":[ 
                 {"name":"route 1", "routeid":1 },
                 {"name":"route 2", "routeid":2 },
                 {"name":"route 3", "routeid":3 }  
             ] 
            },
            {"anchorid":2, 
             "routes":[ 
                 {"name":"route 4", "routeid":4 },
                 {"name":"route 5", "routeid":5 },
                 {"name":"route 6", "routeid":6 }  
             ] 
            }
        ]
    },
    {
        "anchors":[ 
            {"anchorid":3, 
             "routes":[ 
                 {"name":"route 7", "routeid":7 },
                 {"name":"route 8", "routeid":8 },
                 {"name":"route 9", "routeid":9 }  
             ] 
            },
            {"anchorid":4, 
             "routes":[ 
                 {"name":"route 10", "routeid":10 },
                 {"name":"route 11", "routeid":11 },
                 {"name":"route 12", "routeid":12 }  
             ] 
            }
        ]
    }
]

Answer 1

You can bind a data object which contains an array with Polymer's iron-list. But it doesn't support groups yet see feature backlog for current status.

I'm not sure about what you wanted to display exactly in the iron-list so I have provided a typical json structure below (which is a cut-down PouchDB format).

sample json list data:

{
  "offset": 0,
  "total_rows": 2,
  "rows": [
    {
      "doc": {
        "_id": "1",
        "name": "one"
      }
    },
    {
      "doc": {
        "_id": "2",
        "name": "two"
      }
    }
  ]
}

html snippet:

<iron-list id="my-list" items="{{listData.rows}}" as="item" class="fit">
    <template>
        <p>{{item.doc.name}}</p>
    </template>
</iron-list>