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>

<div id="output" style="display: none">
  <h2>API response: HTTP <span id="response-status"></span></h2>
  </h2>
  <ul class="errors message-error"></ul>
  <pre></pre>
</div>

<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');
var output = document.getElementById('output');
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 => {
    document.getElementById('response-status').textContent = r.status;
    return r.json();
  }).then(data => {
    var errorList = output.querySelector('.errors');
    if (data.errors) {
      errorList.style.display = 'block';
      errorList.innerHTML = '';
      data.errors.forEach(error => {
        var li = document.createElement('li');
        li.textContent = error;
        errorList.appendChild(li);
      });
    } else {
      errorList.style.display = 'none';
    }
    output.querySelector('pre').innerText = JSON.stringify(data, null, 2);
    output.style.display = 'block';
  }).catch(err => {
    alert("Error: " + err);
  });
});
</script>

{% endblock %}