datasette/datasette/templates/api_explorer.html

{% extends "base.html" %}

{% block title %}API Explorer{% endblock %}

{% block content %}

<h1>API Explorer</h1>

<p>Use this tool to try out the Datasette write API.</p>

{% if errors %}
  {% for error in errors %}
    <p class="message-error">{{ error }}</p>
  {% endfor %}
{% endif %}

<form method="post" id="api-explorer">
  <div>
    <label for="path">API path:</label>
    <input type="text" id="path" name="path" value="/fixtures/searchable/-/insert" style="width: 60%">
  </div>
  <div style="margin: 0.5em 0">
    <label for="apiJson" style="vertical-align: top">JSON:</label>
    <textarea id="apiJson" name="json" style="width: 60%; height: 200px; font-family: monospace; font-size: 0.8em;"></textarea>
  </div>
  <p><button id="json-format" type="button">Format JSON</button> <input type="submit" value="POST"></p>
</form>

<script>
document.querySelector('#json-format').addEventListener('click', (ev) => {
  ev.preventDefault();
  const json = document.querySelector('textarea[name="json"]').value;
  try {
    const parsed = JSON.parse(json);
    document.querySelector('textarea[name="json"]').value = JSON.stringify(parsed, null, 2);
  } catch (e) {
    alert("Error parsing JSON: " + e);
  }
});
var form = document.getElementById('api-explorer');
form.addEventListener("submit", (ev) => {
  ev.preventDefault();
  var formData = new FormData(form);
  var json = formData.get('json');
  var path = formData.get('path');
  // Validate JSON
  try {
    var data = JSON.parse(json);
  } catch (err) {
    alert("Invalid JSON: " + err);
    return;
  }
  // POST JSON to path with content-type application/json
  fetch(path, {
    method: 'POST',
    body: json,
    headers: {
      'Content-Type': 'application/json',
    }
  }).then(r => r.json()).then(r => {
    alert(JSON.stringify(r, null, 2));
  }).catch(err => {
    alert("Error: " + err);
  });
});
</script>

{% endblock %}