Sinatra で JSON API を用意し JavaScript から利用する
前提
データベースに格納された残高のデータを読みだして図表を描きたい。図表は JavaScript ライブラリを利用してゴリゴリ動く感じのグラフにする。このようなニーズがあったとします。
データの流れ : RDBMS → Ruby(Sinatra) → JSON → JavaScript
JavaScript にデータを渡したいといったシチュエーションはよくあると思われるのでメモ。
JSON API の実装
まずは Sinatra 側に GET したら JSON が返ってくる API を実装する。
参考 [Ruby]SinatraでJSONを返す
http://d.hatena.ne.jp/rightgo09_ruby/20130828/p1
get '/api/balance/show' do
if authorization # 認証に成功したか判定
@balances = Balance.where(uid: @user.uid) # データを DB から読み出す
# 配列に加工
labels = []
data = []
@balances.each do |balance|
labels.push(balance.month)
data.push(balance.data)
end
# sinatra/json を使ってもいいけど
content_type :json
{
type: 'bar',
data: {
labels: labels, # ラベルの配列をあてはめる
datasets: [{
label: "残高",
backgroundColor: "rgba(2,117,216,1)",
borderColor: "rgba(2,117,216,1)",
data: data, # 数値の配列をあてはめる
}],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'month'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: labels.count # ラベルの個数を渡す
}
}],
yAxes: [{
ticks: {
min: 0,
max: data.max, # データの最大値を渡す
maxTicksLimit: data.count # データの個数を渡す
},
gridLines: {
display: true
}
}],
},
legend: {
display: false
}
}
}.to_json # to_json で返せば JSON データを返却できる
end
end
こんな感じで JSON API を作っておく。
JSON 全体をあらかじめ Ruby で前処理しておくのが楽ちん。
JavaScript で JSON を利用する
まずは JavaScript のライブラリを選定。
Chart.js
http://www.chartjs.org/
こいつを組み込んだら、あとは JSON API を叩いて Chart.js に渡すところだけ書いてあげれば良い。
function getBalance() {
var data = null
var req = new XMLHttpRequest();
req.open("GET", "/api/balance/show", false);
req.send(null);
if(req.readyState == 4 && req.status == 200) {
data = req.responseText; // JSON API の戻りを data に格納
};
return JSON.parse(data) // data を返却する
}
var ctx = document.getElementById("BalanceChart"); // DOM を指定
var balanceChart = new Chart(ctx, getBalance()); // Bar Chart のデータとして getBalance 関数の戻り値の JSON を利用
結果
できました。
あとはこの要領で JavaScript ライブラリを駆使してデータの可視化をガンガンおこなえますから便利ですね。
おわりです。
Author And Source
この問題について(Sinatra で JSON API を用意し JavaScript から利用する), 我々は、より多くの情報をここで見つけました https://qiita.com/ynakayama/items/b1eb6a9a39bf650dd517著者帰属:元の著者の情報は、元の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 .