How to evaluate an expression in polymer (equivalent to "eval" in PHP)
<p>I am building a simple table component with Polymer. I am passing the list of items (an array of objects), and also the list of properties I'd like to display.</p>

<p>So, for example, I want to tell the component: only display the "name" and "number" properties of each object I'll pass to you.</p>

<p>this is how I the component is called:</p>

<pre><code>&lt;cool-table 
  items="[[projects]]" 
  columns='[
    {"heading": "Project name", "property": "name"}, 
    {"heading": "Project number", "property": "number"}]'&gt;
&lt;/cool-table&gt;
</code></pre>

<p>So basically it will create a table with two columns, with headings "Project name" and "Project number", and then each row will show project.name and project.number</p>

<p>Here is the component:</p>

<pre><code>&lt;dom-module id="cool-table"&gt;
  &lt;template&gt;

    &lt;div class="table-header"&gt;
      &lt;template is="dom-repeat" items="{{columns}}" as="column"&gt;
        &lt;div class="cell"&gt;
          [[column.heading]]
        &lt;/div&gt;
      &lt;/template&gt;
    &lt;/div&gt;

    &lt;div class="table-content"&gt;
      &lt;template is="dom-repeat" items="{{columns}}" as="column"&gt;
        &lt;div class="cell"&gt;
          &lt;!-- 
          here is where I am getting stuck:
          I want to to display [[ item.[[column.property]] ]]
          So I need to dynamically generate 
          the name of the property I'll put in the data binding
          --&gt;
          item.[[column.property]]
        &lt;/div&gt;
      &lt;/template&gt;
    &lt;/div&gt;

  &lt;/template&gt;

  &lt;script&gt;
    Polymer({
      is: 'cool-table',
      properties: {
        items: {type: Array},
        columns: {type: Array}
      }
   });
  &lt;/script&gt;

&lt;/dom-module&gt;
</code></pre>

<p>In PHP I would do something like eval("\$item.$column.property")</p>

<p>Any idea how this can be achieved with Polymer?</p>

<hr>

<p>Update:</p>

<p>I am rephrasing the question since I realized I made a mistake in describing the component. I'm using another example where I've simplified everything.</p>

<p>Basically I need to create a component that displays an array of objects. Each object will be on a row, and each object's key will be in a column.</p>

<p>Like this:</p>

<pre><code>object1.name | object1.number | object1.type
object2.name | object2.number | object2.type
object3.name | object3.number | object3.type
</code></pre>

<p>So far, so good, that's easy.</p>

<p>Now what I'd like to do is to tell the component which keys need to be displayed, as I don't want to display all of them.</p>

<p>So, I need to tell the component: display only "name" and "number". Then we'll have:</p>

<pre><code>object1.name | object1.number
object2.name | object2.number
object3.name | object3.number
</code></pre>

<p>To do that I'm passing the name of the keys I want to display:</p>

<pre><code>&lt;cool-table item="[[items]]" keys="['name', 'number']"&gt;&lt;/cool-table&gt;
</code></pre>

<p>In cool-table.html I would have this:</p>

<pre><code>&lt;!-- loop through all items --&gt;
&lt;template is="dom-repeat" items="{{items}}" as="item"&gt;
  &lt;div class="row"&gt;

      &lt;!-- now loop through the keys we want to display --&gt;
      &lt;template is="dom-repeat" items="{{keys}}" as="key"&gt;
        &lt;div class="cell"&gt;

          &lt;!-- 
          Here I want to display the item's value for that key
          for example if key is "name" I want to display item.name
          that's what I can't figure out how to do
          --&gt;

        &lt;/div&gt;
      &lt;/template&gt;

  &lt;/div&gt;
&lt;/template&gt;
</code></pre>

<p>Hopefully this now makes more sense. Thanks for hanging there with me!</p>