Create api_view.html

lukefullard · Jan 6, 2025 · 69df4c4 · 69df4c4
1 parent e3f0985
commit 69df4c4
Showing 1 changed file with 85 additions and 0 deletions.
diff --git a/api_view.html b/api_view.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>API JSON Viewer</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 20px;
+    }
+    textarea {
+      width: 100%;
+      height: 300px;
+      font-family: monospace;
+      font-size: 14px;
+    }
+    input[type="text"] {
+      width: 80%;
+      padding: 10px;
+      margin-right: 10px;
+    }
+    button {
+      padding: 10px 20px;
+    }
+    .error {
+      color: red;
+    }
+  </style>
+</head>
+<body>
+  <h1>API JSON Viewer</h1>
+  <p>Enter the API URL to fetch and display the JSON data:</p>
+  <form id="apiForm">
+    <input type="text" id="apiUrl" placeholder="Enter API URL" required>
+    <button type="submit">Fetch JSON</button>
+  </form>
+  <p id="errorMessage" class="error"></p>
+  <textarea id="jsonOutput" readonly></textarea>
+
+  <script>
+    // Function to extract query parameters
+    function getQueryParameter(name) {
+      const params = new URLSearchParams(window.location.search);
+      return params.get(name);
+    }
+
+    // Populate input box if APIurl is in the query string
+    const apiUrlParam = getQueryParameter('APIurl');
+    if (apiUrlParam) {
+      document.getElementById('apiUrl').value = apiUrlParam;
+      fetchJson(apiUrlParam); // Fetch data on page load
+    }
+
+    // Fetch JSON data from API
+    async function fetchJson(apiUrl) {
+      const jsonOutput = document.getElementById('jsonOutput');
+      const errorMessage = document.getElementById('errorMessage');
+
+      // Clear previous output and errors
+      jsonOutput.value = '';
+      errorMessage.textContent = '';
+
+      try {
+        const response = await fetch(apiUrl);
+        if (!response.ok) {
+          throw new Error(`Error: ${response.status} ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        jsonOutput.value = JSON.stringify(data, null, 2); // Pretty-print JSON
+      } catch (error) {
+        errorMessage.textContent = error.message;
+      }
+    }
+
+    // Form submission handler
+    document.getElementById('apiForm').addEventListener('submit', function(event) {
+      event.preventDefault(); // Prevent form submission
+      const apiUrl = document.getElementById('apiUrl').value;
+      fetchJson(apiUrl);
+    });
+  </script>
+</body>
+</html>