From f91e21ba4784626080e10ba6ef17f04fdcd953e7 Mon Sep 17 00:00:00 2001 From: lukefullard Date: Tue, 7 Jan 2025 07:29:03 +1300 Subject: [PATCH] Update api_view.html --- api_view.html | 40 +++++++++++++--------------------------- 1 file changed, 13 insertions(+), 27 deletions(-) diff --git a/api_view.html b/api_view.html index 261ad0f..2a50d30 100644 --- a/api_view.html +++ b/api_view.html @@ -11,18 +11,10 @@ } textarea { width: 100%; - height: 300px; + height: 400px; font-family: monospace; font-size: 14px; } - input[type="text"] { - width: 80%; - padding: 10px; - margin-right: 10px; - } - button { - padding: 10px 20px; - } .error { color: red; } @@ -30,11 +22,7 @@

API JSON Viewer

-

Enter the API URL to fetch and display the JSON data:

-
- - -
+

Loading...

@@ -45,41 +33,39 @@

API JSON Viewer

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 + // Fetch JSON data from the API async function fetchJson(apiUrl) { const jsonOutput = document.getElementById('jsonOutput'); const errorMessage = document.getElementById('errorMessage'); + const apiInfo = document.getElementById('apiInfo'); // Clear previous output and errors jsonOutput.value = ''; errorMessage.textContent = ''; try { + apiInfo.textContent = `Fetching data from: ${apiUrl}`; const response = await fetch(apiUrl); if (!response.ok) { throw new Error(`Error: ${response.status} ${response.statusText}`); } const data = await response.json(); + apiInfo.textContent = `Successfully fetched data from: ${apiUrl}`; jsonOutput.value = JSON.stringify(data, null, 2); // Pretty-print JSON } catch (error) { + apiInfo.textContent = 'Failed to fetch data.'; 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; + // Get API URL from the query parameter and fetch data automatically + const apiUrl = getQueryParameter('APIurl'); + if (apiUrl) { fetchJson(apiUrl); - }); + } else { + document.getElementById('apiInfo').textContent = 'No API URL provided in the query parameters.'; + }