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.log("GetJson url", url);
-    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");
-
+  return await resp.json();
-    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,6 +15,7 @@
         </div>
       </template>
     </middle>
+
     <bottom>
       <button type="button"><a href="/admin/table/{{ .Table }}/">Back</a></button>
       <button class="hover:btn-alert" type="button">Clear</button>

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/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" />