Playing with some modern javascript

app/templates/obsidian/parser.html

@@ -1,5 +1,4 @@
-{% extends "base.html" %} 
-{% block content %}
+{% extends "base.html" %} {% block content %}
 <h1>Parse training data</h1>
 <form method="post" action="/app/obsidian/parse">
   <div class="form-group">
@@ -13,6 +12,10 @@
     ></textarea>
   </div>
   <button type="submit" class="btn btn-primary">Parse Training</button>
+  <div>
+    <button class="btn btn-secondary" onclick="fetchData()">Fetch Data</button>
+    <div id="result"></div>
+  </div>
 </form>
 {% if result %}
 <div class="mt-3">
@@ -20,4 +23,27 @@
   <pre>{{ result }}</pre>
 </div>
 {% endif %}
+
+<script>
+  async function fetchData() {
+    try {
+      const response = await fetch(
+        "/api/v1/trainings/obsidian/",
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      document.getElementById("result").innerHTML = JSON.stringify(
+        data,
+        null,
+        2,
+      );
+    } catch (error) {
+      document.getElementById("result").innerHTML = "Error: " + error.message;
+    }
+  }
+</script>
 {% endblock %}