[Rails→Vue]一対多の関係にある親子オブジェクトをネストさせた状態で取得する
[Vue→Rails]ネストされた状態の親子孫オブジェクト(一対多の関係あり)を全て同時にデータベースに保存するでは、Vue側で作ったネストされたデータを複数のテーブルに保存した。
この記事では、別々のテーブルに保存されたそれらのデータを再びネストされた形でVueコンポーネント側で取得する。
前提条件
モデル
親:School
子:Student
# 親
class School
has_many :students
# 子
class Student
belongs_to :school
保存されているレコード
School
{ id: 1, school_name: 'first' }
{ id: 2, school_name: 'second'}
Student
{ id: 1, student_name: 'Suzuki', age: 13, school_id: 1 }
{ id: 2, student_name: 'Hirano', age: 14, school_id: 1 }
{ id: 3, student_name: 'Nagai', age: 15, school_id: 1 }
{ id: 4, student_name: 'Sato', age: 13, school_id: 2 }
{ id: 5, student_name: 'Iguchi', age: 14, school_id: 2 }
{ id: 6, student_name: 'Arai', age: 15, school_id: 2 }
axios.getによるデータの取得
$axiosはインスタンスプロパティに追加済み
schools#indexにgetリクエストを送りデータを取得する
<script>
...
this.$axios.get('schools')
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
...
</script>
コントローラ
to_jsonメソッドの使用
includeオプションでstudentsを指定する。school.students
で取得されるstudentの配列をschoolにネストさせることができる。
def index
schools = School.all
string = schools.map.to_json(include: :students)
render json: string
end
取得できるデータ
to_jsonのincludeオプションで指定した'students'がそのままキー名になる。
data: [
{
schoolName: 'first',
students: [ // studentsがそのままキー名になる
{ studentName: 'Suzuki', age: 13 },
{ studentName: 'Hirano', age: 14 },
{ studentName: 'Nagai', age: 15 }
]
},
{
schoolName: 'second',
students: [
{ studentName: 'Sato', age: 13 },
{ studentName: 'Iguchi', age: 14 },
{ studentName: 'Arai', age: 15 }
]
}
]
【追記】 キー名を変えたいとき
students以外のキー名にしたいとき(例:studentDataなど)
※キャメルケースの場合、一応Rubocopから怒られます
モデル
アソシエーションを取得するメソッドを親側に新しく定義し、目的のキー名をメソッド名にする。
class School < ApplicationRecord
has_many :students
def studentData # 目的のキー名
self.students
end
end
コントローラ
to_jsonメソッドのmethodsオプションでそのメソッド名を指定する。
メソッド名がそのままキー名になる。
def index
schools = School.all
string = schools.map.to_json(methods: :studentData)
render json: string
end
取得できるデータ
data: [
{
schoolName: 'first',
studentData: [ // studentDataがそのままキー名になる
{ studentName: 'Suzuki', age: 13 },
{ studentName: 'Hirano', age: 14 },
{ studentName: 'Nagai', age: 15 }
]
},
{
schoolName: 'second',
studentData: [
{ studentName: 'Sato', age: 13 },
{ studentName: 'Iguchi', age: 14 },
{ studentName: 'Arai', age: 15 }
]
}
]
参考文献
Author And Source
この問題について([Rails→Vue]一対多の関係にある親子オブジェクトをネストさせた状態で取得する), 我々は、より多くの情報をここで見つけました https://qiita.com/saitaman_zarathustra/items/ef636cab85b49a71fde9著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .