前提・実現したいこと
rails初学者です。個人でアプリ開発をしております。現状動かすことは出来ているのですが、実装部分で気になっている部分がありご教示いただきたく質問させていただきます。
トップページでWeb APIのデータを取得し表示させる際、そのデータにnameという値を補足させるためにstatic_pagesテーブルを作成(カラムはprofileId、name)しWeb APIの値とprofileIdで紐付けているのですが、Staticpages自体が静的なのでそこにデータを持たせるのはよろしくないと伺いどのように実装を変更すれば良いか悩んでおります。
なおWebAPIのレスポンスはprofileId、scoreの2つの値が返ってきます。
該当のソースコード
#static_pages_controller.rb 1 class StaticPagesController < ApplicationController 2 3 4 def top 5 gon.url = Settings.speaker_identification.url 6 gon.subscription_key = Settings.speaker_identification.subscription_key 7 gon.voices = StaticPage.all 8 end
#static_pagesテーブル 1 class CreateStaticPages < ActiveRecord::Migration[6.1] 2 def change 3 create_table :static_pages do |t| 4 t.string :profileId 5 t.string :name 6 7 t.timestamps 8 end 9 end 10 end
#views/static_pages/top.html script内 120 document.getElementById("btn").addEventListener('click', () => { 121 fetch( gon.url, { 122 method: 'POST', 123 headers: { 124 "Ocp-Apim-Subscription-Key": gon.subscription_key, 125 "Content-Type":"audio/wav" 126 }, 127 body: audioBlob 128 }).then(response => { 129 return response.json(); 130 }).then(data => { 131 console.log(JSON.stringify(data)); 132 console.log(gon.voices); 133 //DBからのデータを取得 134 const voices = gon.voices; 135 //API仕様の音声データを取得 136 const voiceId_1 = data['profilesRanking'][0]['profileId']; 137 const voiceId_2 = data['profilesRanking'][1]['profileId']; 138 const voiceId_3 = data['profilesRanking'][2]['profileId']; 139 const voiceId_4 = data['profilesRanking'][3]['profileId']; 140 const name_1 = voices.find( ({profileId}) => profileId === voiceId_1 )['name']; 141 const name_2 = voices.find( ({profileId}) => profileId === voiceId_2 )['name']; 142 const name_3 = voices.find( ({profileId}) => profileId === voiceId_3 )['name']; 143 const name_4 = voices.find( ({profileId}) => profileId === voiceId_4 )['name'];
試したこと
アソシエーションが一番近い選択肢なのかと思い調べてみましたが、WebApiのデータと関連付ける場合の方法が今一分からず詰まっております。
補足情報(FW/ツールのバージョンなど)
Rails 6.1.3.1 ruby 3.0.0 Vue.js 2.6.1
あなたの回答
tips
プレビュー