0
1

More than 1 year has passed since last update.

DynamoDB のデータを web で表示 (FastAPI)

Posted at

こちらのプログラムのバックエンドを 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
}

// -----------------------------------------------------------------------
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1