Insert data from custom jsontable into q-table



  • I got this pen with a qtable.
    https://codepen.io/haangglide/pen/WNGbYXr

    Im storing data in a json table with the following structure:

    [
      {
        "id": 1,
        "name": "Diana", 
        "age": 5,
        "location": "Mumbai",
        "color": "blue"
      },
      {
        "id": 2,
        "name": "Billy",
        "age": 4,
        "location": "Detroit",
        "color": "green"
      },
      {
        "id": 3,
        "name": "Mimmi",
        "age": 3,
        "location": "New York",
        "color": "green"
      }
    ]
    

    This works fine but I need to have another structure on my data with a nested properties object for other situation in my application. I need this structure:

    [{
        "id": 1,
        "properties": {
          "name": "Diana",
          "age": 5,
          "location": "Mumbai",
          "color": "blue"
        }
      },
      {
        "id": 2,
        "properties": {
          "name": "Billy",
          "age": 4,
          "location": "Detroit",
          "color": "green"
        }
      },
      {
        "id": 3,
        "properties": {
          "name": "Mimmi",
          "age": 3,
          "location": "New York",
          "color": "green"
        }
      }
    ]
    

    How can I populate a table with this structure instead?

    Here is my javascript:

    new Vue({
      el: '#q-app',
      data () {
        return {
          loading: false,
          filter: "",
          rowCount: 10,
            columns: [
            {
              name: "name",
              required: true,
              label: "Name",
              align: "left",
              field: "name",
              sortable: true
            },
            {
              name: "age",
              required: true,
              label: "Age",
              align: "left",
              field: "age",
              format: val => `${val}`,
              sortable: true
            },
            {
              name: "location",
              required: true,
              label: "Location",
              align: "left",
              field: "location",
              format: val => `${val}`,
              sortable: true
            }
          ],
          data: [
            {
              id: 1,
              name: "Diana", 
              age: 5,
              location: "Mumbai",
              color: "blue"
            },
            {
              id: 2,
              name: "Billy",
              age: 4,
              location: "Detroit",
              color: "green"
            },
            {
              id: 3,
              name: "Mimmi",
              age: 3,
              location: "New York",
              color: "green"
            }
          ]
        }
      },
    
     methods: {
        tableFormat(val) {
          console.log(val)
          if (val.color === "blue") {
            return "marked-row";
          } else {
            return "unmarked-row";
          }
        }
      }
    })
    

    and html:

    <div id="q-app">
      <div class="q-pa-md">
        <q-table
            :data="data"
            :columns="columns"
            row-key="id"
            :filter="filter"
            :loading="loading"
            :rows-per-page-options="[5]"
        >
            <template v-slot:body="props">
              <q-tr :props="props" :class="tableFormat(props.row)">
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                  {{col.value}}
                </q-td>
              </q-tr>
            </template>
        </q-table>
      </div>
    </div>
    


  • @acros From the docs:

        // row Object property to determine value for this column
        field: 'name',
        // OR field: row => row.some.nested.prop,
    

    So you would use:

    field: row => row.properties.name,
      
    

Log in to reply