How to evaluate an expression in polymer (equivalent to "eval" in PHP) - data-binding

Question

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.
So, for example, I want to tell the component: only display the "name" and "number" properties of each object I'll pass to you.
this is how I the component is called:
<cool-table
items="[[projects]]"
columns='[
{"heading": "Project name", "property": "name"},
{"heading": "Project number", "property": "number"}]'>
</cool-table>
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
Here is the component:
<dom-module id="cool-table">
<template>
<div class="table-header">
<template is="dom-repeat" items="{{columns}}" as="column">
<div class="cell">
[[column.heading]]
</div>
</template>
</div>
<div class="table-content">
<template is="dom-repeat" items="{{columns}}" as="column">
<div class="cell">
<!--
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
-->
item.[[column.property]]
</div>
</template>
</div>
</template>
<script>
Polymer({
is: 'cool-table',
properties: {
items: {type: Array},
columns: {type: Array}
}
});
</script>
</dom-module>
In PHP I would do something like eval("\$item.$column.property")
Any idea how this can be achieved with Polymer?
Update:
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.
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.
Like this:
object1.name | object1.number | object1.type
object2.name | object2.number | object2.type
object3.name | object3.number | object3.type
So far, so good, that's easy.
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.
So, I need to tell the component: display only "name" and "number". Then we'll have:
object1.name | object1.number
object2.name | object2.number
object3.name | object3.number
To do that I'm passing the name of the keys I want to display:
<cool-table item="[[items]]" keys="['name', 'number']"></cool-table>
In cool-table.html I would have this:
<!-- loop through all items -->
<template is="dom-repeat" items="{{items}}" as="item">
<div class="row">
<!-- now loop through the keys we want to display -->
<template is="dom-repeat" items="{{keys}}" as="key">
<div class="cell">
<!--
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
-->
</div>
</template>
</div>
</template>
Hopefully this now makes more sense. Thanks for hanging there with me!

Answer 1

Ah, I found the solution. I needed to use a computed binding:
<!-- loop through all items -->
<template is="dom-repeat" items="{{items}}" as="item">
<div class="row">
<!-- now loop through the keys we want to display -->
<template is="dom-repeat" items="{{keys}}" as="key">
<div class="cell">
[[getValueFromKey(item, column.key)]]
</div>
</template>
</div>
</template>
<script>
getValueFromKey: function(item, key) {
return item[key];
}
</script>

Answer 2

If I'm understanding your question correctly, you want an inner loop inside the columns array loop, where you iterate through the various keys of your column object?
If so, perhaps this question / answer would help?
Hi Hubert, again, not sure if I understand your question properly now, as I don't see a name property in your data. But I added one, and maybe this is what you are looking for?
Your component would look like this:
<div class="table-header">
<template is="dom-repeat" items="{{columns}}" as="column">
<div class="cell">
[[column.heading]]
</div>
</template>
</div>
<div class="table-content">
<template is="dom-repeat" items="{{columns}}" as="column" filter="{{isPropertyEqName('name')}}">
<div class="cell">
<!--
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
-->
[[column.name]]
</div>
</template>
</div>
</template>
<script>
Polymer({
is: 'cool-table',
properties: {
items: {type: Array},
columns: {type: Array}
},
isPropertyEqName: function(search){
return function(item){
return item.property === 'name';
}
}
});
</dom-module>
and your use of the component would look as follows, where I addded the name property
<cool-table
items="[[projects]]"
columns='[
{"heading": "Project name", "property": "name", "name": "hello"},
{"heading": "Project number", "property": "number", "name": "world"}]'>
</cool-table>