31:[] 2f:{"title":"How to: Convert an API Response into HTML","cells":[{"id":0,"value":"# How to: Convert an API Response into HTML","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"Observable allows you to pull in data from either remote or local sources of many kinds. One way to get information to your notebook is akin to traditional web development -> pinging an API and rendering the results. In this notebook we'll ping the [Randomuser](https://randomuser.me) api and render a \"Business Card\" in HTML.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"First, let's get some data! We'll fetch from the API and save it in a variable.","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"user = await fetch(\"https://randomuser.me/api\").then((result)=>result.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"As you can see if you expand the Object view we get back a JSON object which contains two properties - `results` and `info`. We will pull our user data out of this `results` object and render it on this page as HTML.","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"**Note** while we could do this by creating an HTML element then using JavaScript to poke the DOM, this is kinda an antipattern in Observable. We want to avoid \"side effects\" of methods like DOM poking because since every cell in Observable runs async, if you had two different cells effecting the DOM, you might get unexpected - out of order - results. So, instead we are going to create an HTML \"template\" and let the values flow into the HTML as it's being created. ","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"card = html`\n

\n ${user.results[0].name.first} ${user.results[0].name.last}\n

\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"As you can see from the example above, it is unambiguous what is the template and what is the data. This is similar to what you might do with a server side template. Notice if you reload this notebook, that the name changes dynamically. Also, we are taking advantage of ES6's template strings to form the content, instead of using string concatenation.","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"Another aspect to understand is that cells in Observable share things like CSS context. So we can create a cell which contains all the look and feel style rules we need. Given the magic of time, I've already worked out the rules we need below. But for you, you can interactively develop this for your own needs. When you make changes to the CSS and save the cell, the changes apply right away. It's like having the notebook act as an IDE while you are doing development. Observable is perfect for just playing around with HTML, CSS, and JS to build something quick, and off the cuff.","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"style = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"Let's create a variable that pulls out the user's information from the API so it's easier to work with. This is a way of not having to depend on the API's structure for this card \"component\".","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"userData = ({\n firstname: user.results[0].name.first,\n lastname: user.results[0].name.last,\n picture: user.results[0].picture.medium,\n email: user.results[0].email,\n street: user.results[0].location.street.name,\n city: user.results[0].location.city,\n state: user.results[0].location.state,\n country: user.results[0].location.country\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"And Here's the HTML for the \"Business Card\"","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"cardHTML = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"This is just a toy example, but it was super easy to pull in some data, format it in a simple way that's easily consumable by an HTML component, and we were able to style it super easily via CSS. ","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"I hope this short notebook will give you some ideas for creating content from various data sources. Note that you can import content from any cell in Observable. So our business card can actually be imported into another page - and it will smartly use the JavaScript, HTML, and CSS from the source cell, even though you only import one cell.\nCheck out this [other notebook](https://observablehq.com/@triptych/example-of-importing-the-business-card-cell) that imports the \"Business Card\" cell.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}