Fetching data

Learn how to fetch data from external sources.

Components can pull in data from external sources.

Fetch from URL

The <fetch> tag imports data from external webpages. The name property is whatever you want to call this data, and how you'll reference the data later. The url parameter an absolute path to a URL that contains data. Fetch can only be used for data <=16kb. Attempting to use fetch on larger data sources may cause issues and unexpected behavior.

<component>
  <fetch name="data" url="https://jsonplaceholder.typicode.com/posts/1">
    <h1> Access the entries within `data` like this: ${data.title} </h1>
    <p> ${data.body} </p>
  </fetch>
</component>

You can use fetched data the same way you'd use other component data.

Fetch from RSS / XML

You can also fetch data from any valid XML source, including RSS feeds. Use JSON.stringify() to help you figure out the right keys.

<component>
  <fetch name="xkcd" url="https://xkcd.com/rss.xml">
    <h1> A comic </h1>
    ${JSON.stringify(xkcd.rss)}
    ${xkcd.rss.channel.item[0].title}
    ${xkcd.rss.channel.item[0].description}
  </fetch>
</component>

The output of this becomes:

<html>
<body>
  <h1> A comic </h1>
    {"channel":{"title":"xkcd.com","link":"https://xkcd.com/","description":"xkcd.com: A webcomic of romance and math humor.","language":"en","item":[{"title":"Sunshield","link":"https://xkcd.com/2564/","description":"<img src="https://api.useparcel.com/workspaces/d9a72077-9c81-44f3-804e-827ec9a15611/nodes/ef2804ca-157b-4b81-96df-703740d7b01e/resolve?parcelPath=\" https: imgs.xkcd.com comics sunshield.png\"" title="\" rip" the surface of mars\" alt="\">","pubDate":"Wed, 05 Jan 2022 05:00:00 -0000","guid":"https://xkcd.com/2564/"},{"title":"Throat and Nasal Passages","link":"https://xkcd.com/2563/","description":"<img src="https://api.useparcel.com/workspaces/d9a72077-9c81-44f3-804e-827ec9a15611/nodes/ef2804ca-157b-4b81-96df-703740d7b01e/resolve?parcelPath=\" https: imgs.xkcd.com comics throat_and_nasal_passages.png\"" title="\" i" always felt like what the 'you are now aware of your tongue' thing needed in order to be truly enjoyable was an element mortal peril.\" alt="\">","pubDate":"Mon, 03 Jan 2022 05:00:00 -0000","guid":"https://xkcd.com/2563/"},{"title":"Formatting Meeting","link":"https://xkcd.com/2562/","description":"<img 20 8601 src="https://api.useparcel.com/workspaces/d9a72077-9c81-44f3-804e-827ec9a15611/nodes/ef2804ca-157b-4b81-96df-703740d7b01e/resolve?parcelPath=\" https: imgs.xkcd.com comics formatting_meeting.png\"" title="\" neither" group uses iso because the big-endian enthusiasts were all at meeting years ago.\" alt="\">","pubDate":"Fri, 31 Dec 2021 05:00:00 -0000","guid":"https://xkcd.com/2562/"},{"title":"Moonfall","link":"https://xkcd.com/2561/","description":"<img src="https://api.useparcel.com/workspaces/d9a72077-9c81-44f3-804e-827ec9a15611/nodes/ef2804ca-157b-4b81-96df-703740d7b01e/resolve?parcelPath=\" https: imgs.xkcd.com comics moonfall.png\"" title="\" novel" ideas and cool explosions are both good, but what i really want from a movie is novel about explosions.\" alt="\">","pubDate":"Wed, 29 Dec 2021 05:00:00 -0000","guid":"https://xkcd.com/2561/"}]}}
    Sunshield
    <img src="https://imgs.xkcd.com/comics/sunshield.png" title="RIP the surface of Mars" alt="RIP the surface of Mars"></body>
</html>

XML Attributes and Text

If an XML tag has attributes, they will become _attributeName. If the tag has text as well as attributes, the text will be accessible via tag.text, where tag is whichever XML tag. For example, NASA's RSS news feed has the element

<enclosure url="http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/barron_chari.jpg?itok=mOVEK1E7" length="409499" type="image/jpeg" />

The url will be accessible via enclosure._url.

The guid tag in the same feed contains text.

<guid isPermaLink="false">http://www.nasa.gov/press-release/nevada-air-cadets-to-hear-from-nasa-astronauts-aboard-space-station</guid>

The text between the tag would be accessible via guid.text.

Fetching Arrays

Any data fetched as an array can be iterated through.

<component>
  <fetch name="xkcd" url="https://xkcd.com/rss.xml">
    <ul>
      <li foreach="comic in xkcd.rss.channel.item">${comic.title}</li>
    </ul>
  </fetch>
</component>

Fetching CSVs

Fetch also supports importing data from CSV (comma separated value) spreadsheets.

<component>
  <fetch name="freelancers" url="https://docs.google.com/spreadsheets/d/1nkJbiFDOcWx6CVrmpytMd-OYLj0WpduQS8R4LTb7-80/gviz/tq?tqx=out:csv&sheet=Sheet1">
    <ul>
      <li p-for="freelancer in freelancers">${freelancer[0]}</li>
    </ul>
  </fetch>
</component>

The data is returned as a 2D array. Access any cell with data[row][col]. Note that rows and columns are 0 indexed (start at 0).

Working with Google spreadsheets

If your data is already in a Google sheet, append gviz/tq?tqx=out:csv&sheet=Sheet1 to the URL to have the sheet accessible as a CSV. Change Sheet1 to match the name of the sheet you want to use.

Scrape

Parcel integrates microlink for easy web scraping.

Scrape requires a name and a url. The data attribute is optional, unless you want to pull specific data from a webpage.

<component>
  <scrape name="pricing" url="https://useparcel.com/pricing" data="{features:{selectorAll: '#features tr h4',attr: 'text'},}">
    <ul>
      <li foreach="feature in pricing.features">${feature}</li>
    </ul>
  </scrape>
</component>
Previous ArticleNext Article