2d:null 2e:["$","title",null,{"children":"In-browser data scraping | Basil | Observable"}] 33:[] 31:{"id":"509049955bf1e6e3","slug":"in-browser-data-scraping","title":"In-browser data scraping","thumbnail":"fd9d5d36a17064495809af9cc3943e6b6caac91a81c4054ab0018a3ae56ee52e","access_level":"public","create_time":"$D2019-09-09T17:31:26.960Z","update_time":"$D2019-10-08T15:59:47.051Z","view_time":null,"first_public_time":"$D2019-09-11T20:00:21.330Z","fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"c677b775e28e0727","login":"bsaf","name":"Basil","avatar_url":"https://avatars-next.observableusercontent.com/8c494e9bc7e4fc6ca380bf32678d2fce62abf6528c9997919bcdf7aac2e48b01","tier":"starter_2024"},"version":145,"publish_version":145,"role":null,"authored":false,"authors":[{"type":"individual","id":"faaf9ba702688d0a","login":"bsaf","name":"Basil","avatar_url":"https://avatars-next.observableusercontent.com/8c494e9bc7e4fc6ca380bf32678d2fce62abf6528c9997919bcdf7aac2e48b01","tier":null}],"members":[{"type":"individual","id":"faaf9ba702688d0a","login":"bsaf","name":"Basil","avatar_url":"https://avatars-next.observableusercontent.com/8c494e9bc7e4fc6ca380bf32678d2fce62abf6528c9997919bcdf7aac2e48b01","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":31,"collection":null,"type":"notebook","body":{"title":"In-browser data scraping","cells":[{"id":0,"value":"md`# In-browser data scraping`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`_A quick example of how we might grab and process some data._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`### First, start with a URL you want to scrape from:\n\n_You might need to add CORS anywhere to the start of it: https://cors-anywhere.herokuapp.com/_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"url = \"https://cors-anywhere.herokuapp.com/https://www.ukbaa.org.uk/services-for-entrepreneurs/contact-investors/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`### We now get the HTML of the page using Axios:\n\n_And we store the result in the 'result' variable._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"result = await axios({\n method: \"get\",\n url: url\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`### Now we load it into Cheerio so we can traverse it easily:\n\n_Cheerio is just a library that makes it easy to grab items from an HTML document._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$$ = cheerio.load(result.data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`### Grab the node we want:\n\n_Here we're grabbing all h2 tags that have a link inside them. You can expand the investors variable below to see the results._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"investors = $(\"h2 a\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`### Construct an object for each item:\n\n_This is so we can turn it in to a table easily._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"investorData = {\n let data = []\n investors.each((i, item) => {\n let title = $(item).text();\n let url = $(item).attr(\"href\");\n data.push({ title: title, url: url })\n });\n yield data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`### Output as a table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"html`\n\n \n ${investorData.map((row, i) =>\n html``\n )}\n \n

${row.title}

${row.url}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md `### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"axios = require(\"axios@0.19.0/dist/axios.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"cheerio = require('https://bundle.run/cheerio@1.0.0-rc.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"