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

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

新規登録して質問してみよう
ただいま回答率
85.46%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Ruby on Rails

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1198閲覧

APIサーバーから返ってきたデータを遷移先のページで利用する方法について

GenkiSugiyama

総合スコア86

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Ruby on Rails

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/05/20 12:21

編集2020/05/21 00:33

フロントエンド:React.js バックエンド:Ruby on RialsでECサイトのようなものを制作中です。

注文ページの「注文を確定する」ボタン押下時したら
①フロントからpostメソッドでapi通信を行い注文情報を送信する
②rails側でデータの登録が完了したら注文データとURLを含めたJSONを返す
③api通信が完了したら「注文完了ページ」へ遷移する
④「注文完了ページ」のボタン要素のリンクにrailsから受け取ったURLを埋め込む
という処理を実現したいです。

完了ページに遷移した際に②でrails側から受け取ったURL情報を、完了ページのボタン要素のリンク先として利用したいのですがその実装方法を教えていただきたいです。

【「注文確定」ボタン押下時の処理】

const PostOrder = () => { ・ ・ バリデーションチェック等 ・ ・ post_api('/orders', OrderData, userHeaderPost).then((result) => { if (result === 'onemore') { 〜通信失敗時の処理〜 } else { dispatch({ type: 'SET_ORDER', value: result.data }); dispatch({ type: 'SET_ORDER_HISTORY', value: result.data }); setLoading(false); alert('注文手続きが完了しました'); dispatch(push('/OrderComplete')); window.scrollTo(0, 0);    } }) }

【railsから返却されるJSON】

{ order:{注文ID、購入商品などの注文データ} status:created sample_url:https://sample.com ←この値を遷移先ページのリンク要素として使いたい }

【注文完了ページのボタン要素】

<div className="btn_wrap"> <a id="btnMoveOn" className="commonButton2 div_link" href="ここにJSONで渡された「https://sample.com」を挿入したい">sampleへ</a> </div>

自分はRails側担当であまりReactの知識がないのですが、React担当者があまり動けないため急遽こちらで対応することになり困っています。。。
皆様のご回答お待ちしております。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

自己解決

urlの値をreact側のstateに持たせることで管理することができるようになりました。

投稿2020/06/03 09:40

GenkiSugiyama

総合スコア86

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問