Polymer 1.0 - Increment through nested array on template bind.

Question

I am working on a polymer element which receives a json array from a web service. In the component there is a template that should iterate over the array to display one of array values.

The following code displays one of the nested arrays.

    <template is="dom-repeat" items="{{response.0.sentence}}">
     <div style="display: inline; postition: realative;">
       <span>{{item.word}}></span>
     </div>
   </template>

Here is an example of the data the webservice returns

    [
{
    "sentence": [
        {
            "word": "He",
            "Color": "Black"   
        },
        {
            "word": "is",
            "color": "purple"   
        },
        {
            "word": "it",
            "color": "green"
        },
        {
            "word": "he",
            "color": "red"
        }
    ]
},
{
    "sentence": [
                {
            "word": "they",
            "Color": "Black"   
        },
        {
            "word": "it",
            "color": "purple"   
        },
        {
            "word": "polymer",
            "color": "green"
        },
        {
            "word": "red",
            "color": "green"
        }
    ]
}]

Current Output: He is it he

What I need to do is iterate through every sentence in the object and display its word property. Which should be able to do by incrementing the 0 in items="{{response.0.sentence}}"

Wanted Output: He is it he they it polymer red

I looked at several potential solutions such as creating the binding by the following, but had no luck.

   <template is="dom-repeat" items="{{response}}" index-as="i">
     <div style="display: inline; postition: realative;">
       <span>{{item.i.sentence.word}}></span>
     </div>
   </template>

My next guess is to create some sort of computed value, but I have had trouble finding a way to implement that within the binding or I am missing something obvious when stepping through nested arrays.

Any help would be appreciated.

Answer 1

Use a nested dom-repeat :

 <template is="dom-repeat" items="[[response]]">
  <template is="dom-repeat" items="[[item.sentence]]">
    <span>[[item.word]]</span>
  </template>
 </template>