2e:null 2f:["$","title",null,{"children":"In-browser data scraping | Daniel Zamora | Observable"}] 34:[] 32:{"id":"c3af87fb2efb86dc","slug":"in-browser-data-scraping","title":"In-browser data scraping","thumbnail":"9b8b1e98619318663cc96e81d5cb0f5ff699f6926719ca723bb1a613f9b6bf16","access_level":"public","create_time":"$D2020-05-04T02:23:54.774Z","update_time":"$D2020-05-04T02:25:59.616Z","view_time":null,"first_public_time":"$D2020-05-04T04:42:05.971Z","has_unpublished_edits":null,"fork":{"id":"509049955bf1e6e3","slug":"in-browser-data-scraping","title":"In-browser data scraping","owner":{"id":"c677b775e28e0727","login":"bsaf","name":"Basil"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3f0b37dc506376c0","login":"danurizp","name":"Daniel Zamora","avatar_url":"https://avatars-next.observableusercontent.com/0f03f9a4a06148d4621ba5d7998977108c03775e3b7ec3169c62807e466168ef","tier":"starter_2024"},"version":147,"publish_version":147,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7aecd6ca605d135","login":"danurizp","name":"Daniel Zamora","avatar_url":"https://avatars-next.observableusercontent.com/0f03f9a4a06148d4621ba5d7998977108c03775e3b7ec3169c62807e466168ef","tier":null}],"members":[{"type":"individual","id":"c7aecd6ca605d135","login":"danurizp","name":"Daniel Zamora","avatar_url":"https://avatars-next.observableusercontent.com/0f03f9a4a06148d4621ba5d7998977108c03775e3b7ec3169c62807e466168ef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"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://ai-lovedata.com\"","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":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"