Public
Edited
Dec 1, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`<pre>${escapeHtml(JSON.stringify(current_tasks, null, 4))}</pre>`
Insert cell
html`Look, Ma, ${"<i>automatic escaping</i>"}!`
Insert cell
donesUpdated = checklist &&
Promise.all(
checklist.map(async (checks, idx) => {
let newDone = checks.length;
let item = current_tasks[idx];
let response = null;
if (item.done != newDone) {
response = await (
await fetch(
`https://latest.datasette.io/ephemeral/tasks/${item.rowid}/-/update`,
{
method: "POST",
mode: "cors",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
update: {
done: newDone
}
})
}
)
).json();
}
return { done: newDone, idx, item: JSON.stringify(item), response };
})
)
Insert cell
checklist
Insert cell
add_response = {
const response = await fetch(
"https://latest.datasette.io/ephemeral/tasks/-/insert",
{
method: "POST",
mode: "cors",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
row: {
task: to_add,
done: 0
}
})
}
);
return await response.json();
}
Insert cell
create_table_response = ensureTableExists()
Insert cell
viewof createResponse = Inputs.button("Create table", {
value: null,
reduce: async () => {
const response = await fetch(
"https://latest.datasette.io/ephemeral/-/create",
{
method: "POST",
mode: "cors",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
table: "tasks",
row: { task: "and another" }
})
}
);
return await response.json();
}
})
Insert cell
token
Insert cell
createResponse
Insert cell
current_tasks = {
// Trigger after add or create
create_table_response;
add_response;
try {
const response = await fetch(
"https://latest.datasette.io/ephemeral/tasks.json?_shape=array&task__notblank=1",
{
method: "GET",
mode: "cors",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
}
}
);
let data = await response.json();
if (!(data instanceof Array) && !data.ok) {
ensureTableExists();
return [];
}
return data;
} catch (e) {
return [];
}
}
Insert cell
async function ensureTableExists() {
const response = await fetch(
"https://latest.datasette.io/ephemeral/-/create",
{
method: "POST",
mode: "cors",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
table: "tasks",
columns: [
{ name: "task", type: "text" },
{ name: "done", type: "integer" }
]
})
}
);
return await response.json();
}
Insert cell
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more