配列を正規化して表示させたい

フロントの実装で、困っているのでご教授頂けますと幸いです。

userA 1 →　userA 1 2 3
userA 2  　  userB 4 5
userA 3  　  userC 6 
userB 4
userB 5
userC 6

DBからデータを抜き取って、取得したデータを右のように表示させているが、
vue.jsでどのような方法で実現したら良いか悩んでます。

vue.js
1tr(v-for="(a,index) in answers")
2          template(v-if="index === 0")
3           td {{ a.user_id }}
4           td {{ a.answer }}
5          template(v-else-if="a.user_id === answers[index-1].user_id")
6           td {{ a.answer }}
7          template(v-else-if="a.user_id !== answers[index-1].user_id")
8           td(v-for) {{ a.user_id }}

上記の方法で、試してみましたが、下記にようになってしまっている状況です。

userA 1
2 3
userB
4 
5
userC
6

原因または解決法をご存知の方はコメントいただけますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

質問文の実現したい内容が分かりづらかったので、一部予測が入っていますが、以下の方法はいかがでしょうか。

前提条件

DBから取得したデータ「answers」は次の形である。

const answers = [
  { user_id: 'userA', answer: 1 },
  { user_id: 'userA', answer: 2 },
  { user_id: 'userA', answer: 3 },
  { user_id: 'userB', answer: 4 },
  { user_id: 'userB', answer: 5 },
  { user_id: 'userC', answer: 6 }
]

このデータをuser_id毎に正規化したい。

方法

<template lang="pug">
  tr(v-for="user_id in Object.keys(normalizedAnswers)" :key="user_id")
    td {{ user_id }}
    td(v-for="(answer, i in normalizedAnswers[user_id])" :key="i") {{ answer }}
</template>

<script>
// ...省略
  computed: {
    normalizedAnswers() {
      let normalizedAnswers = {}
      answers.forEach(answer => {
        if (normalizedAnswers.hasOwnProperty(answer.user_id)) {
           normalizedAnswers[answer.user_id].push(answer.answer)
        } else {
          normalizedAnswers[answer.user_id] = [ answer.answer ]
        }
      })
    }
  }
// ...省略
</script>

投稿2019/10/04 10:50