【AWS】bitflyer注文一覧表示
きっかけ】
過去の記事参照
buffalokusojima.hatenablog.com
1. 使用するサービス
HTML, Javascript, CSS
2. 概要
前回バックエンド側で注文一覧を取得したところまでやりました。今回はそれらのHTML上での表示をやります。
前回の記事は以下になります。
buffalokusojima.hatenablog.com
3.実装
①見た目の部分
読み込み時に注文取得関数を呼び出し、データを受け取った後に描画する仕組みです。
<head> </head> <title>タイトル</title> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } #orderDetail{ display: none; } .orderDetailContent{ height: 100px; } span{ padding: 5px; } </style> <body onload="getStatus()"> <div id="positionArea"></div> <div id="openOrderArea"></div>
②読み込み時の呼び出し関数
getStatus内にデータ取得関数や後々作成される関数が入ります。
データ取得関数などAPIを叩く系は共通してsendRequestを呼び出す仕組みになっており、
それぞれの関数で与える引数と、データ取得後に呼び出される関数を渡します。
今回説明するデータ取得関数であるgetOrdersはデータ取得後にコールバック関数である
makeOrdersによって内容が描画される仕組みです。
const URL = "API URL" function getStatus(){ getOrders(); } function getOrders(){ var data = { "method": "GET", "url": URL + "GetOrders" } //引数はそれぞれ、API呼び出しの引数、コールバック関数、コールバック関数への引数 sendRequest(data, makeOrderList, null); } function sendRequest(data, callback, calbackValue){ var request = new XMLHttpRequest(); request.open(data.method, data.url); request.setRequestHeader("Content-Type", "application/json"); request.onload = function(err){ console.log(err) if(request.readyState === 4){ if(request.status === 200){ console.log("success") var res = JSON.parse(request.responseText) console.log(res); callback(res.body, calbackValue); } else{ console.error(request.status, request.response); } } }; request.onerror = function(err){ console.log("err" + request.statusText); }; console.log("sending") var body = null; if(data.body){ body = { "body": JSON.stringify(data.body) } body = JSON.stringify(body); } console.log(body); request.send(body); }
③取得したデータの描画
取得したデータの描画を動的に要素を作成することで実現します。
データが無かった場合はないことを伝える描画をします。
function makeOrderList(data){ //取得したデータ data = JSON.parse(data); //描画対象となるdiv var targetDiv = document.getElementById("openOrderArea"); if(targetDiv.firstElementChild){ targetDiv.removeChild(targetDiv.childNodes[0]); } //データがなければメッセージを表示 if(!data.data){ var div = document.createElement('div'); div.innerText="No Open Order"; targetDiv.appendChild(div); return; } //テーブルのヘッダ作成 var table = document.createElement('table'); table.id = 'orderListTable'; var th = document.createElement('th'); th.innerText = 'date'; table.appendChild(th); th = document.createElement('th'); th.innerText = 'executed' table.appendChild(th); th = document.createElement('th'); th.innerText = 'type'; table.appendChild(th); th = document.createElement('th'); table.appendChild(th); //データの数分、テーブルの中身を作成 for(d of data.data){ var tr = document.createElement('tr'); var td = document.createElement('td'); //注文日付のフォーマット整え var format_str = 'YYYY-MM-DD hh:mm:ss'; var date; if(d.parent_order_date){ date = new Date(d.parent_order_date); }else if(d.child_order_date){ date = new Date(d.child_order_date); } format_str = format_str.replace(/YYYY/g, date.getFullYear()); format_str = format_str.replace(/MM/g, date.getMonth()+1); format_str = format_str.replace(/DD/g, date.getDate()); format_str = format_str.replace(/hh/g, date.getHours()); format_str = format_str.replace(/mm/g, date.getMinutes()); format_str = format_str.replace(/ss/g, date.getSeconds()); td.innerText=format_str; //クリック時の動作関数を宣言(今回は未実装) td.onclick=openOrderDetail; //各種カラムにidを振っておく、後々の関数実装時に役に立つ if(d.child_order_id){ td.id = "child_id"+d.child_order_id; }else{ td.id = "parent_id"+d.parent_order_acceptance_id; } tr.appendChild(td); //サイズの描画 var td = document.createElement('td'); if(d.executed_size && d.executed_size > 0){ td.innerText = d.executed_size; } td.onclick=openOrderDetail; if(d.child_order_id){ td.id = "child_id"+d.child_order_id; }else{ td.id = "parent_id"+d.parent_order_acceptance_id; } tr.appendChild(td); //注文タイプの描画 var td = document.createElement('td'); if(d.parent_order_type){ td.innerText=d.parent_order_type; }else if(d.child_order_type){ td.innerText=d.child_order_type; } td.onclick=openOrderDetail; if(d.child_order_id){ td.id = "child_id"+d.child_order_id; }else{ td.id = "parent_id"+d.parent_order_acceptance_id; } tr.appendChild(td); //キャンセルボタンの実装 var td = document.createElement('td'); var input = document.createElement('input'); input.type="button"; input.value="cancel"; if(d.child_order_id){ input.id = "child_id"+d.child_order_id; }else{ input.id = "parent_id"+d.parent_order_acceptance_id; } //キャンセル関数の呼び出し(今回は未実装) input.addEventListener('click', function(){ console.log("cancel:", this); cancelOrder(d.product_code, this.id); }) td.appendChild(input); tr.appendChild(td) if(d.child_order_id){ tr.id="child_id"+d.child_order_id; }else if(d.parent_order_acceptance_id){ tr.id = "parent_id"+d.parent_order_acceptance_id; } table.appendChild(tr); } targetDiv.appendChild(table) }
4. おわりに
以上で、注文一覧が表示されるようになりました。各種未実装の関数はまた次回以降実装していきます。
画面に表示してみるとこんな感じになります。