Как эффективно отобразить элементы вложенных массивов с определёнными индексами?

Question

[jeruthadam]

Есть массив:

[
  ['name', 'surname', 'age', 'job'],
  ['Vasya', 'Pupkin', '22', 'banker'],
  ['Petya', 'Seledkin', '23', 'developer'],
  ['Vova', 'Putin', '88', 'politician'],
  ...еще 10к таких же
]

Нужно вынести элементы вложенных массивов только с определёнными индексами, например, 0 и 3:

[
  ['name', 'job'],
  ['Vasya', 'banker'],
  ['Petya', 'developer'],
  ['Vova', 'politician'],
  ...еще 10к таких же
]

Сделать желательно наиболее быстрым способом, т.к. это происходит на клиенте.

Я попробовал отфильтровать это силами Vue, но он ругается:

<table>
      <tr v-for="(item, i) in parsedCSV" :key="i">
        <th v-if="i === 0 || i === 3"  v-for="(rowItem, index) in item" :key="index">
          {{ rowItem }}
        </th>
      </tr>
    </table>

Говорит, что нельзя v-if юзать на v-for. Как тогда лучше сделать?

Answer 1

[0xD34F]

Сделайте v-for по индексам нужных вам элементов:

<tr v-for="item in parsedCSV">
  <td v-for="i in [ 0, 3 ]">{{ item[i] }}</td>
</tr>

Или сделайте computed свойство, где всё лишнее будет убрано:

shortItems() {
  return this.parsedCSV.map(([ name,,,job ]) => [ name, job ]);
},

<tr v-for="item in shortItems">
  <td v-for="n in item">{{ n }}</td>
</tr>

Comments

[jeruthadam]

Вау. Про первый способ даже не догадался, и мне от отлично подходит, т.к. мне надо индексы, по которым проводить выборку, динамически менять.

@click="indexes = [2, 3]"

И все работает. Вроде супер, но как у этого способа с производительностью? Вроде наоборот, даже лучше чем фильтровать в компутеде (нету этой лишней операции)?

И если не трудно, как сделать чтобы в компутеде тоже можно было динамически менять эти индексы для выборки? Я попробовал это, но увы не работает

data () { return { indexes: [0, 1], } },
computed: {
  filtered () {
    return this.parsedCSV.map(row =>
          row.filter((r, i) => {
            this.indexes.forEach(index => {
              index === i
            })
          })
        );
}
}

Хотелось бы сравнить производительность.

[0xD34F]

jeruthadam, пагинацию делайте.

динамически менять эти индексы

const { indexes } = this;
return this.parsedCSV.map(item => item.filter((n, i) => indexes.includes(i)));

[jeruthadam]

0xD34F, еще раз благодарю, все работает!

Пагинацию сделаю. А как думаете стоит ли нормализовать данные? Например, как у Вьютифай, массив с объектами https://vuetifyjs.com/en/components/data-tables

[
  { name: 'Vasya', job: 'banker' },
  { name: 'Petya', job: 'developer' }
]

Будет ли так эффективней? Надо будет еще фильтрацию делать при клике на столбец... Стоит ли данные на беке нормализовать?