2e:null 2f:["$","title",null,{"children":"Exercise: Dog pictures | Observable | Observable"}] 34:T413,md`--- ## Review - Using import, you can grab cells from other notebooks to reuse in your own - Observable is made to work well with asynchronous code, like the Promises returned by fetch(). You can use await with those Promises to perform multiple asynchronous steps in the same cell. - We can use viewof with many different types of inputs to make notebooks interactive, like we did in this one using viewof with a list of types of dogs. - You can click on ${caret} output data in Observable to view its details. ## Further reading - [Introduction to Promises](/@observablehq/introduction-to-promises) - [Introduction to Imports](/@observablehq/introduction-to-imports) ## Getting extra help Having trouble with this tutorial? We’re happy to assist you: post in the [Observable user forum](https://talk.observablehq.com/) and we can help out. ## In the next tutorial Next up, we’ll learn how to [include a JavaScript library in a notebook, and create a visualization. Let’s go 👉](/@observablehq/tutorial-3-visualizing-data)`35:[] 32:{"id":"ab57f07fbf354579","slug":"tutorial-2-dog-pictures","title":"Exercise: Dog pictures","thumbnail":"7b2e6cb3fe6dcbb1ec49650a434cf9b302c3c9512240ecca48393c62dd3c2f8c","access_level":"public","create_time":"$D2018-08-15T18:38:30.299Z","update_time":"$D2021-10-17T18:20:01.248Z","view_time":null,"first_public_time":"$D2018-08-16T22:12:39.846Z","has_unpublished_edits":null,"fork":false,"stars":29,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":189,"publish_version":189,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":83,"collection":null,"type":"notebook","body":{"title":"Exercise: Dog pictures","cells":[{"id":0,"value":"md`# Exercise: Dog pictures\n\n${signinNote}\n\nIn the last tutorial, we built a sandwich calculator and learned about the basics of cells in Observable notebooks. This time we’re going to learn about Observable’s unique approach to asynchronous code, and import from another notebook to build a dog picture browser.\n\n### Steps\n\n1. Fetch a dog picture\n3. Show that dog picture\n4. Fetch a list and explore the data\n6. Import from another notebook\n6. Organize your notebook\n6. Customize the dogs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"step1 = md`---\n\n## Step 1: Fetch a dog picture\n\nWe’ll be using [dog.ceo](https://dog.ceo/) for this example, an API that lets you find free dog pictures. As a web API, it’s a service that responds to web requests with a standard format, in this case JSON. We can use the standard [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) API to request each dog picture.\n\n\\`\\`\\`js\ndog = (await fetch(\\`https://dog.ceo/api/breeds/image/random\\`)).json()\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"video(\"tutorial-2/1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"step2 = md`---\n\n## Step 2: Show that dog picture\n\nOkay, so now we’ve got an object of the API’s response, from which we can get the dog image. Let’s grab that dog image and display it in an img tag, using the built-in html [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).\n\n\\`\\`\\`js\nhtml\\`

\\`\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"video(\"tutorial-2/2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"step3 = md`---\n\n## Step 3: Fetch a list and explore the data\n\nNext up, let’s make it easy to select a specific breed of dog. dog.ceo has an API that [lists all the available breeds](https://dog.ceo/dog-api/documentation/). Getting the list of dog breeds is just like fetching a dog image: we’ll also use the fetch() method, await, and .json().\n\n\\`\\`\\`js\nbreeds = (await fetch(\\`https://dog.ceo/api/breeds/list/all\\`)).json()\n\\`\\`\\`\n\nThis is a good time to check out Observable’s built-in Inspector. Whenever you see some data with a ${caret}, you can click on it and explore its items.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"video(\"tutorial-2/3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"step4 = md`---\n\n## Step 4: Import from another notebook\n\nJust like the slider we added in the last tutorial, we’ll be adding an input and using viewof to get its value. We could build the select box from scratch, but there’s already a notebook that has lots of input types ready to go: Jeremy’s [Inputs notebook](https://beta.observablehq.com/@jashkenas/inputs).\n\nSo let’s import the 'select' input type from that notebook and use it to show dog breeds.\n\n\\`\\`\\`js\nimport {select} from \"@jashkenas/inputs\"\n\\`\\`\\`\n\nThen, create a new cell and use this new select method, combined with the fetched breeds, to add a picker.\n\n\\`\\`\\`js\nviewof breed = select(Object.keys(breeds.message))\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"video(\"tutorial-2/4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"step5 = md`---\n\n## Step 5: Organize your notebook\n\nWe’ve been writing this notebook cell-by-cell, but to make it presentable, the most important cells should go at the top. So let’s reorder the cells, moving our new dog picker to the top. You can do this with the buttons on the right of the cell, or if you click on your user icon in the top-right and click ‘Help’, you can access a list of keyboard shortcuts that include moving cells around.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"video(\"tutorial-2/5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"step6 = md`---\n\n## Step 6: Customize the dogs\n\nNow, let’s add that user-selectable breed option into the dog image request cell. Find the dog cell, and update its code to use the [by breed](https://dog.ceo/dog-api/documentation/breed) endpoint.\n\n\\`\\`\\`js\ndog = (await fetch(\\`https://dog.ceo/api/breed/$\\{breed}/images/random\\`)).json()\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"video(\"tutorial-2/6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"seriesNavigation(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import {key, caret, video, signinNote, seriesNavigation} from \"6a6d6989dd6b59c6\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"