DynamoDB のデータを web で表示

DynamoDB のデータを web で表示する方法です。
JSON に変換してから、web で表示します。

## JSON への変換 ##

```py: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")
# --------------------------------------------------------------------
```

実行方法

```bash
./dynamo_scan.py cities > cities.json
```

## Web で表示 ##

フォルダー構造

```text
$ tree
.
├── cities.json
├── index.html
├── public_doc.css
└── public_doc.js
```



```html: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>
```

```js: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)
    })
}

// -----------------------------------------------------------------------
```

```css: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;}

/* -------------------------------------------------------------- */
```

サーバーの起動

```bash
http-server
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/d0dc1ac6-7864-2226-a440-77c1522fe219.png)