2c:null 2d:["$","title",null,{"children":"Fetch Data on Click | Harry Biddle | Observable"}] 32:[] 30:{"id":"fba93d4af370f417","slug":"fetch-data-on-click","title":"Fetch Data on Click","thumbnail":"164153f225bb5db2e1e91a62755410caa3d0a19b7b2e31a6b0a9da144f26fe08","access_level":"public","create_time":"$D2020-05-07T09:53:02.208Z","update_time":"$D2020-05-13T13:09:38.251Z","view_time":null,"first_public_time":"$D2020-05-07T10:28:11.277Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"698edd1f22e9d4d7","login":"harrybiddle","name":"Harry Biddle","avatar_url":"https://avatars-next.observableusercontent.com/cb2de2eafd016bd637f3f9ddfb40954d06828995d8fd2e21d31a29d494015b09","tier":"starter_2024"},"version":457,"publish_version":457,"role":null,"authored":false,"authors":[{"type":"individual","id":"914ea1886092acdd","login":"harrybiddle","name":"Harry Biddle","avatar_url":"https://avatars-next.observableusercontent.com/cb2de2eafd016bd637f3f9ddfb40954d06828995d8fd2e21d31a29d494015b09","tier":null}],"members":[{"type":"individual","id":"914ea1886092acdd","login":"harrybiddle","name":"Harry Biddle","avatar_url":"https://avatars-next.observableusercontent.com/cb2de2eafd016bd637f3f9ddfb40954d06828995d8fd2e21d31a29d494015b09","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fetch Data on Click","cells":[{"id":0,"value":"md`# Fetch Data on Click\n\nBy default ObservableHQ is completely reactive. If your notebook fetches external data, this means that as soon as you update the UI, any data fetches will be made. This is usually great! However, sometimes the data fetch is an expensive operation that you want to avoid.\n\nThis notebook provides a button that will take an action on click, such as fetching data based on a form.\n\nThis is similar to Mike Bostock's [More Deliberate Inputs](https://observablehq.com/@mbostock/more-deliberate-inputs), but more general. The function he defines there uses the data within only one form, whereas the solution here can access any number of elements within the notebook.\n\n \\`\\`\\`javascript\n import { fetchButton } from \"@trase/fetch-data-on-click\"\n\n viewof data = fetchButton(() => doAnything())\n \\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`----\n### Demo - Fetching data based on a form`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"input = html`

\n Choose a dataset:\n