DynamoDB のデータを web で表示する方法です。
JSON に変換してから、web で表示します。
JSON への変換
dynamo_scan.py
#! /usr/bin/python
#
# dynamo_scan.py
#
# Jul/26/2022
# --------------------------------------------------------------------
import sys
import json
import boto3
from decimal import Decimal
# --------------------------------------------------------------------
def decimal_default_proc(obj):
if isinstance(obj, Decimal):
return float(obj)
raise TypeError
# --------------------------------------------------------------------
def scan_all(table, scan_kwargs):
items = []
done = False
start_key = None
while not done:
if start_key:
scan_kwargs['ExclusiveStartKey'] = start_key
response = table.scan(**scan_kwargs)
items.extend(response.get('Items', []))
start_key = response.get('LastEvaluatedKey', None)
done = start_key is None
return items
# --------------------------------------------------------------------
sys.stderr.write("*** 開始 ***\n")
dynamodb = boto3.resource('dynamodb')
name_table = sys.argv[1]
table = dynamodb.Table(name_table)
response = scan_all(table,{})
json_str = json.dumps(response,default=decimal_default_proc)
print(json_str)
sys.stderr.write("*** 終了 ***\n")
# --------------------------------------------------------------------
実行方法
./dynamo_scan.py cities > cities.json
Web で表示
フォルダー構造
$ tree
.
├── cities.json
├── index.html
├── public_doc.css
└── public_doc.js
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="public_doc.js"></script>
<link rel="stylesheet" href="public_doc.css">
<title>DynamoDB</title>
</head>
<body>
<h2>DynamoDB</h2><p />
<div class="contents"></div>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Apr/21/2022 AM 11:21<p>
</body>
</html>
public_doc.js
// -----------------------------------------------------------------------
// public_doc.js
//
// Jul/21/2022
//
// -----------------------------------------------------------------------
'use strict'
// -----------------------------------------------------------------------
window.onload = ()=>{
document.querySelector("#outarea_aa").innerHTML = "*** public_doc *** start ***"
display_information()
document.querySelector("#outarea_hh").innerHTML = "*** public_doc *** end ***"
}
// -----------------------------------------------------------------------
// [4]:
function display_information()
{
const url_in = "cities.json"
read_fetch_proc(url_in)
console.log("*** display_information() *** end ***")
}
// -----------------------------------------------------------------------
// [4-6]:
function read_fetch_proc(url)
{
fetch(url).then((response) => {
if(!response.ok) {
console.log('Read error!')
throw new Error('error')
}
console.log('Read ok!')
return response.text()
}).then((data) => {
console.log(data)
var dict_aa= JSON.parse(data)
var str_out = ""
str_out += "<table>"
for (var it in dict_aa)
{
const unit_aa = dict_aa[it]
str_out += "<td>" + unit_aa["key"] + "</td>"
str_out += "<td>" + unit_aa["name"] + "</td>"
str_out += "<td>" + unit_aa["population"] + "</td>"
str_out += "<td>" + unit_aa["date_mod"] + "</td>"
str_out += "</tr>"
}
str_out += "</table>"
document.querySelector(".contents").innerHTML = str_out
}).catch((error) => {
console.log(error)
})
}
// -----------------------------------------------------------------------
public_doc.css
/* -------------------------------------------------------------- */
/*
public_doc.css
Aug/24/2020
*/
/* -------------------------------------------------------------- */
table.main,td,th {
table-layout:fixed;
border:1.5px #7e7e7e solid;
border-collapse: collapse;
height: 16px;
}
th {
background: #c6c6c6;
}
table.tag {
border:0.5px green solid;
table.main,td,th {
table-layout:fixed;
border:1.5px #7e7e7e solid;
border-collapse: collapse;
height: 16px;
}
th {
background: #c6c6c6;
}
table.tag {
border:0.5px green solid;
}
tr.cyan {
background-color: #c7d7c7;
}
.red {color:#ff0000;}
/* -------------------------------------------------------------- */
サーバーの起動
http-server
