Fetch Sample
User Data
Response Data
Code
from typing import TypedDict
from webcompy.elements import html, repeat
from webcompy.components import define_component, ComponentContext
from webcompy.reactive import ReactiveList, Reactive
from webcompy.aio import AsyncWrapper
from webcompy.ajax import HttpClient
from webcompy import logging
class User(TypedDict):
id: int
name: str
@define_component
def FetchSample(context: ComponentContext[None]):
users = ReactiveList[User]([])
json_text = Reactive("")
@AsyncWrapper()
async def fetch_user_data():
res = await HttpClient.get("fetch_sample/sample.json")
logging.info(res)
users.value = res.json()["data"]
json_text.value = res.text
@context.on_after_rendering
def _():
fetch_user_data()
return html.DIV(
{},
html.DIV(
{},
html.H5(
{},
"User Data",
),
repeat(
sequence=users,
template=lambda user_data: html.DIV(
{"class": "user-data"},
html.UL(
{},
html.LI({}, "User ID: " + str(user_data["id"])),
html.LI({}, "User Name: " + user_data["name"]),
),
),
),
),
html.DIV(
{},
html.H5(
{},
"Response Data",
),
html.PRE(
{},
html.CODE(
{},
json_text,
),
),
),
)
FetchSample.scoped_style = {
".user-data": {
"margin": "10px auto",
"padding": "10px",
"background-color": "#fafafa",
"border-radius": "15px",
},
}