title: Maps in Lists in Maps
body: <p>After much trial and error, I am at a loss as to how to deal with embedded lists and maps in Dart and furthermore, how they can be accessed via Polymer data binding.  The objective is to read a JSON file and build an HTML table that can be filtered and sorted.  (I just hard coded map data below for clarity.)</p>
  
  <p>I can build an HTML table within my Polymer element (see buildTable) as long as the Map looks like testMap3 seen in the Dart code below and it renders fine with:</p>
  
  <p>HTML:           </p>
  
  <pre><code>&lt;p&gt;&lt;b&gt;The data from testMap3 after building table in Dart file:&lt;/b&gt;/p&gt; 
  &lt;table class="bordered" id="dataTable"&gt;&lt;/table&gt;     
  </code></pre>
  
  <p>However, I can't seem to figure out how to do this via Polymer data binding.  Right now I am just dumping the k-v pairs, just so that I can see the objects:  </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;&lt;b&gt;The data from testMap3 via Polymer binding:&lt;/b&gt;&lt;/p&gt; 
  &lt;template repeat="{{key in testMap.keys}}"&gt;
    &lt;p&gt;{{key}} : {{testMap[key]}}&lt;/p&gt;   
  &lt;/template&gt;
  </code></pre>
  
  <p><b>How can I use data binding to create a table that would match the result of the first example above?  And to make things more difficult, how can I do so using testMap2 instead?</b></p>
  
  <p>Dart:</p>
  
  <p>Rendering testMap3 works fine when calling buildTable:</p>
  
  <pre><code>Map testMap3 = toObservable({
                  'columns' : ["First Name", "Attending", "Phone"],
                  'rows' : [{'First Name' : "Alice", 
                             'Attending' : "Yes",
                             'Phone' : "555-1212"},                              
                            {'First Name' : "Bob", 
                             'Attending' : "Yes",
                             'Phone' : "555-2323"}                              
                           ]
             });
  </code></pre>
  
  <p>Iterating through testMap2 has been problematic given the additional embedded 'Phone' value is a list containing another map:</p>
  
  <pre><code> Map testMap2 = toObservable({
                 'columns' : ["First Name", "Attending", "Phone"],
                 'rows' : [{'First Name' : "Alice", 
                            'Attending' : "Yes",
                            'Phone' : [{'Home' : "555-1234",
                                        'Work' : "555-4321",
                                        'Mobile' : "555-1212"}]},                              
                           {'First Name' : "Bob", 
                            'Attending' : "Yes",
                            'Phone' : [{'Home' : "555-2345",
                                        'Work' : "555-5432",
                                        'Mobile' : "555-2323"}]}                            
                          ]
            });
  </code></pre>
  
  <p>The following code works fine for testMap3 but nothing I have tried lets me loop through the phone data if I use testMap2.  <b>Any ideas on how I can do this?</b></p>
  
  <pre><code>buildTable() {
  
    TableElement table = this.shadowRoot.querySelector("#dataTable");
    table.children.clear();
  
    TableSectionElement tBody = table.createTBody();
  
    TableSectionElement tHead = table.createTHead();
    TableRowElement trh = tHead.addRow();
  
    for (var column in testMap3["columns"]) {
      var cell = new Element.tag('th');
      cell.text = column;
      trh.append(cell);
    }
  
    for (var row in testMap3["rows"]) {
  
      TableRowElement tr = tBody.addRow();
      for (var column in testMap3["columns"]) {
        tr.addCell().text = row[column];       
      }
    }   
  }
  </code></pre>
  
  <p>Finally, one of the ultimate goals is to filter all the columns in the rendered table taking an approach similar to the following...is this doable?  I can't seem to find examples using Maps or even Lists within Lists.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;template repeat="{{city in listOfCities | filter(searchParameter)}}"&gt;
    &lt;li&gt;{{city}}&lt;/li&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Dart:</p>
  
  <pre><code>@observable List listOfCities = ["Chicago", "New York", "Los Angeles", "Dallas", "Denver"];
  
  filter(term) =&gt; (listOfCities) =&gt; term.isEmpty ? listOfCities : listOfCities.where((item) =&gt; item.toLowerCase().contains(searchParameter.toLowerCase())).toList();
  </code></pre>
  
  <p>Any guidance is greatly appreciated as I have been banging my head for over a week and am just about ready to give up.</p>
  
  <p>Thanks!</p>