Populate cells without knowing the data key

Question

My data is an array of objects with key-value pairs. I'm trying to populate a table with the data in a polymer component. If I use the key explicitly, it works. Here is an example with "FacilityId":

<table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <template is="dom-repeat" items="{{columns}}">
            <th>{{item}}</th>
        </template>
    </tr>
    </thead>
    <tbody>
        <template is="dom-repeat" items="{{data}}">
            <tr>
                <td>{{item.FacilityId}}</td>
            </tr>
        </template>
    </tbody>
</table>

However, as you can see from the dynamically generated columns, I don't always know what the keys will be named. I tried using {{item[0]}} but that doesn't work, and even if it did I won't know how many there will be. I also tried using a nested template but I couldn't figure it out.

Here is what my data looks like (again, the number and names of fields could vary though):

Misread your question, Your `FaciltyId`, `LastMessage` and `SourceConfigName` will stay as is right?, I mean only their respective values will be coming as dynamic right? — David R, Sep 14 '16 at 14:53
No, the column names and count might change. This is a reusable Polymer component — , Sep 14 '16 at 14:53
Can you please check the answer given by `Scott Miles` here - http://stackoverflow.com/questions/30781500/how-to-use-dom-repeat-with-objects-instead-of-arrays-in-polymer-1-0 — David R, Sep 14 '16 at 14:56
definitely needs remapping and flattening, just as @DavidR said — Th0rndike, Sep 14 '16 at 15:00
I had to adjust for the array of objects but I got it. Thanks! — , Sep 14 '16 at 15:03

score 0 · Accepted Answer · edited May 23 '17 at 12:08

Based on the answer referenced by @David R, this works:

<table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <template is="dom-repeat" items="{{columns}}">
            <th>{{item}}</th>
        </template>
    </tr>
    </thead>
    <tbody>
        <template is="dom-repeat" items="{{data}}">
            <tr>
                <template is="dom-repeat" items="{{_toArray(item)}}">
                    <td>{{item.value}}</td>
                </template>
            </tr>
        </template>
    </tbody>
</table>

And the custom function from https://stackoverflow.com/a/30794220/736893:

Polymer({
    is: 'widget-table',
    properties: {
        data: {
            type: Array,
            value: function() {return []}
        }
    },
    _toArray: function(obj) {
        return Object.keys(obj).map(function(key) {
            return {
                name: key,
                value: obj[key]
            };
        });
    }
});

Populate cells without knowing the data key

1 Answers1