Jbuilderの基本

筆者はRails + Vue.jsを使っていますがjQueryでもJbuilderの設定は同じだと思います

Vueファイルにアソシエーション先の情報(今回はツイートの投稿者)を取ってきたいけど
JSでは以下(4行目)では取ってくることができません

<template>
  <div id="app">
    <div v-for="e in tweets" :key="e.id">
      {{e.user.name}} <!--投稿者-->
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data: function() {
    return {
      tweets: []
    }
  },
  mounted() {
    axios
    .get('/api/v1/tweets.json')
    .then(response => (this.tweets = response.data))
  }
}
</script>

そこでjbuilderを使います

コントローラー

筆者はapiを使っています
app > controller > api > v1 > tweet_controller
3行目はindex.json.jbuilderファイルを参照します、というような記述です

def index
  @tweets = Tweet.all
  render 'index', formats: 'json', handlers: 'jbuilder'
end

jbuilder

app > views > api > v1 > index.json.jbuilder
tweet.user.nameをvueファイル内ではxx.nameという記述で使えるようにする

json.array! @tweets do |tweet|
  json.name tweet.user.name
end

Vueファイル

これでe.nameで投稿者を表示できる

<template>
  <div id="app">
    <div v-for="e in tweets" :key="e.id">
      {{e.name}} <!--投稿者(tweet.user.name)と同じ意味-->
    </div>
  </div>
</template>

以下略