A little better Alpine.js usage by having GetJson just be an async function you use in x-init.

static/js/code.js

@@ -31,22 +31,10 @@ class PaginateTable {
   }
 }
 
-class GetJson {
+const GetJson = async (url) => {
-  constructor(url) {
+  const resp = await fetch(url);
-    console.assert(url !== undefined, "Invalid url is undefined");
+  console.assert(resp.status == 200, "failed to get it");
-    console.log("GetJson url", url);
+  return await resp.json();
-    this.item;
-    this.url = url;
-  }
-
-  async item() {
-    const the_url = this.url;
-    const resp = await fetch(this.url);
-    console.assert(resp.status == 200, "failed to get it");
-
-    this.item = await resp.json();
-    return this.item;
-  }
 }
 
 const ConfirmDelete = async (table, obj_id) => {

views/admin/table/new.html

@@ -1,13 +1,12 @@
-<script>
-  let Data = new GetJson("/api/admin/new/table/{{ .Table }}");
-</script>
-
 <h1><a href="/admin/table/{{ .Table }}/">&laquo;</a>Admin {{ .Table }}</h1>
 
-<block x-data="Data">
+<block x-data="{item: {}}"
+       x-init="item = await GetJson('/api/admin/new/table/{{ .Table }}')">
+
   <form method="POST" action="/api/admin/new/table/{{ .Table }}">
     <card>
     <top><h2>New {{ .Table }}</h2></top>
+
     <middle>
       <template x-for="(value, key) in item">
         <div>
@@ -16,10 +15,11 @@
         </div>
       </template>
     </middle>
+
     <bottom>
-        <button type="button"><a href="/admin/table/{{ .Table }}/">Back</a></button>
+      <button type="button"><a href="/admin/table/{{ .Table }}/">Back</a></button>
-        <button class="hover:btn-alert" type="button">Clear</button>
+      <button class="hover:btn-alert" type="button">Clear</button>
-        <button class="hover:btn-hover" type="submit">Insert</button>
+      <button class="hover:btn-hover" type="submit">Insert</button>
     </bottom>
     </card>
   </form>

views/admin/table/view.html

@@ -1,10 +1,8 @@
-<script>
-  let Data = new GetJson("/api/admin/table/{{ .Table }}/{{ .Id }}");
-</script>
-
 <h1><a href="/admin/table/{{ .Table }}/">&laquo;</a>Admin {{ .Table }}</h1>
 
-<block x-data="Data">
+<block x-data="{item: {}}"
+       x-init="item = await GetJson('/api/admin/table/{{ .Table }}/{{ .Id }}')">
+
   <form method="POST" action="/api/admin/table/{{ .Table }}/{{ .Id }}">
     <card>
     <top><h1>{{ .Table }} : {{ .Id }}</h1></top>

views/feed.html

@@ -35,12 +35,12 @@
   <bar class="justify-evenly">
     <img src="/favicon.ico" />
     <b>Notifications</b>
-      <svg xmlns="http://www.w3.org/2000/svg"
+    <svg xmlns="http://www.w3.org/2000/svg"
-        width="2rem"
+      width="2rem"
-        height="2rem"
+      height="2rem"
-        viewBox="0 0 2rem 2rem">
+      viewBox="0 0 2rem 2rem">
-        <use href="/icons/settings.svg#settings" />
+      <use href="/icons/settings.svg#settings" />
-      </svg>
+    </svg>
   </bar>
 
   <template x-for="message in contents">

views/post/view.html

@@ -1,10 +1,7 @@
-<script>
-  let theMessage = new GetJson("/api/message/1");
-</script>
 
 <block class="!gap-0 border-t-1 border-gray-600"
        x-data="{item: {}}"
-       x-init="item = await theMessage.item()">
+       x-init="item = await GetJson('/api/message/1')">
 
   <bar class="!p-0 mb-3">
     <img src="/logo.png" style="width: 50px; height: 50px" class="aspect-square" />