質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

880閲覧

form_withに入力された検索ワードを元に取得したJsonデータをVueで表示できない

amby

総合スコア40

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/04/01 08:40

やりたいこと

米国の特許の検索システムのAPIを利用し、フォームに検索ワードを入力すると該当の申請者が申請した特許情報が一覧で出てくるシステムを作りたいです。
rails側でAPIからデータを取得し、Vueで表示させたいです。

困っている点

検索ワードの入力フォームを現在、form_wothで作っています。(下記views/homes/index.htm.erb)
しかし、検索ワードを入力してsubmitボタンを押しても結果が返ってきません。下記の「app/controllers/api/v1/employees_controller.rb」の中では「word = params[:search]」で取得し、「"searchText":"firstNamedApplicant:(#{word})",」という形でapiへのリクエストに組み込んでいます。

しかし一方で、「"searchText":"firstNamedApplicant:(#{word})",」の部分を例えば「"searchText":"firstNamedApplicant:(#{google})",」というように検索ワードを明示すると、一覧データが取得できます。(これはフォームで検索ワードを送信するとかではなく、トップページ(http://localhost:3000/)にアクセスした段階ですでに一覧情報が取得されています。)

そもそもフォームで入力された検索ワードがparamsに渡っていないのか?と思うのですが、Vueなしでrailsだけで実装した場合はこれで表示できていたので原因がわからず困っております。
form_withを使用して実装ができるのか、Vueでは他のやり方が必要なのか、どの点が改善点か、ご教示いただけますと幸いです。
※また、qiitaの記事を参考にして動いたものを改造して試しているため、コントローラ名など若干不自然な部分があるかと思います。(これを参考につくっていました)

環境

MacOS 11.2.3
ruby 2.7.1
rails 6.0.3.5
Webpacker 4.0
Vue 2.6.12

views/homes/index.htm.erb

<%= form_with url: root_path, method: :get, local: true do |f| %> <%= f.text_field :search %> <%= f.submit 'Search', name: nil%> <% end %> <%= javascript_pack_tag 'hello_vue' %> <%= stylesheet_pack_tag 'hello_vue' %>

app/javascript/packs/hello_vue.js

import Vue from 'vue' import App from '../app.vue' document.addEventListener('DOMContentLoaded', () => { const app = new Vue({ render: h => h(App) }).$mount() document.body.appendChild(app.$el) console.log(app) })

app/javascript/app.vue

<template> <div id="app"> <table> <tbody> <tr> <th>PatentNumber</th> <th>patentTitle</th> <th>FirstNamedApplicant</th> </tr> <tr v-for="e in res_data"> <td>{{ e["patentNumber"] }}</td> <td>{{ e["patentTitle"] }}</td> <td>{{ e["firstNamedApplicant"] }}</td> </tr> </tbody> </table> </div> </template> <script> import axios from 'axios'; export default { data: function () { return { res_data: [] } }, mounted () { axios .get('/api/v1/employees.json') .then(response => (this.res_data = response.data)) } } </script> <style scoped> p { font-size: 2em; text-align: center; } </style>

app/controllers/api/v1/employees_controller.rb

class Api::V1::EmployeesController < ApiController rescue_from ActiveRecord::RecordNotFound do |exception| render json: { error: '404 not found' }, status: 404 end def index uri = URI.parse("https://ped.uspto.gov/api/queries") http = Net::HTTP.new(uri.host, uri.port) http.use_ssl = uri.scheme === "https" word = params[:search] a_params = { "searchText":"firstNamedApplicant:(#{word})", "fq":["appStatus:\"Patented Case\""], "fl":"*", "mm":"100%", "df":"patentTitle", "qf":"appEarlyPubNumber applId appLocation appType appStatus_txt appConfrNumber appCustNumber appGrpArtNumber appCls appSubCls appEntityStatus_txt patentNumber patentTitle primaryInventor firstNamedApplicant appExamName appExamPrefrdName appAttrDockNumber appPCTNumber appIntlPubNumber wipoEarlyPubNumber pctAppType firstInventorFile appClsSubCls rankAndInventorsList", "facet":"false", "sort":"applId asc", "start":"0" } headers = { "Content-Type" => "application/json" } response = http.post(uri.path, a_params.to_json, headers) @J_data = JSON.parse(response.body) res_data = @J_data["queryResults"]["searchResponse"]["response"]["docs"] render json: res_data end end

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問