Restructure a objects array for table

Question

I have a table header:

      fields: [
        'description',
        'potSize',
        'price',
      ],

I have my table data:

      testArray: [
        {
          price: '10,00',
          potSize: 'C2',
          description: 'desc',
        },
        {
          price: '10,00',
          potSize: 'C2',
          description: 'rwefv ',
        },
        {
          price: '10,00',
          potSize: 'C2',
          description: '',
        },
      ],

Both are read in a table component

    <thead>
      <tr>
        <th v-for="item in fields" :key="item">{{ item }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, key) in testArray" :key="key">
        <td v-for="(keys, col) in item" :key="keys">
          {{ item[col] }}
        </td>
      </tr>
    </tbody>

As you can see is the header row and the data row a key mismatch. I need to display the testArray key-value pairs in the headers order. How can I go most effective about that?

Expected output:

akuiper · Accepted Answer · 2021-03-21 19:05:31Z

2

In the inner loop, loop through fields instead of item and then look up corresponding field by key:

  <tr v-for="(item, key) in testArray" :key="key">
    <td v-for="col in fields" :key="col">
      {{ item[col] }}
    </td>
  </tr>

answered Mar 21, 2021 at 19:05

akuiper

216k33 gold badges362 silver badges379 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Restructure a objects array for table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related