こちらのプログラムのバックエンドを FastAPI に変更しました。
DynamoDB のデータを web で表示
FastAPI のプログラムはこちらです。(CORS に対応しています。)
FastAPI: DynamoDB のデータを読む
クライアントのツリー構造
$ tree
.
├── index.html
├── public_doc.css
└── public_doc.js
public_doc.js だけ変更します。
public_doc.js
// -----------------------------------------------------------------------
// public_doc.js
//
// Jul/26/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 = "http://localhost:8000/dynamo/uchida-test-cities"
read_fetch_proc(url_in)
console.log("*** display_information() *** end ***")
}
// -----------------------------------------------------------------------
// [4-6]:
function read_fetch_proc(url)
{
fetch(url,{ mode: 'cors' }).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)
const dict_aa= JSON.parse(data)
const str_out = table_gen_proc(dict_aa)
document.querySelector(".contents").innerHTML = str_out
}).catch((error) => {
console.log(error)
})
}
// -----------------------------------------------------------------------
function table_gen_proc(dict_aa)
{
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>"
return str_out
}
// -----------------------------------------------------------------------