【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. おわりに

以上で、注文一覧が表示されるようになりました。各種未実装の関数はまた次回以降実装していきます。
画面に表示してみるとこんな感じになります。

order_list
注文一覧