Creating table using nested object in Quasar

Question

I am using Quasar to make Q-Tables and can't make it work using nested objects with dynamic key names. Here is my table content:

      data: [
        {
          'FrozenYogurt' : {
            'topping': 'strawberry'
          }
        },
        {
          'IceCreamSandwich' : {
            'baseFlavor': 'chocolate'
          }
        },
        {
          'CreamPuff' : {
            'sourceBakery': 'Starbucks'
         }
      ]

And my columns:

      columns: [
        {
          name: 'key',
          required: true,
          label: 'Property',
          align: 'left',
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'key.key', align: 'center', label: 'Property', field: 'key', sortable: true },
        { name: 'key.value', label: 'Value', field: 'key.value', sortable: true, style: 'width: 10px' },
      ],

So in this case, I want the table to look like:

Product          Property      Value

FrozenYogurt     topping       strawberry
IceCreamSandwich baseFlavor    chocolate
CreamPuff        sourceBakery  Starbucks

Here is my vue file:

    <q-table
      :data="data"
      :columns="columns"
      row-key="key"
      binary-state-sort
    >
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="key" :props="props">
            {{ props.key }}
            <q-popup-edit v-model="props.key">
              <q-input v-model="props.row.key" dense autofocus counter></q-input>
            </q-popup-edit>
          </q-td>
          <q-td key="key.key" :props="props">
            {{ props.key.key }}
            <q-popup-edit v-model="props.key.key" title="Update Property" buttons>
              <q-input v-model="props.key.key" dense autofocus></q-input>
            </q-popup-edit>
          </q-td>
          <q-td key="key.value" :props="props">
            <div class="text-pre-wrap">{{ props.key.value }}</div>
            <q-popup-edit v-model="props.key.value">
              <q-input type="textarea" v-model="props.key.value" dense autofocus></q-input>
            </q-popup-edit>
          </q-td>
        </q-tr>
      </template>
    </q-table>

Of course my vue file looks incorrect.. But I am not sure how to access the object key names / values.

Is this possible??

Thanks much!

Answer 1

Just create the computed property that return's the data in your format.

  computed:{

  getData(){

    return this.data.map(function(item){
      console.log(item)
      return {name:Object.keys(item)[0],Property:Object.keys(item[Object.keys(item)[0]])[0],Value:Object.values(item[Object.keys(item)[0]])[0]}
    })
  }
} 

Working codepen - https://codepen.io/Pratik__007/pen/RwPQgNr?editors=1010