Cheerio & ChatGPT: A Primer on Web Scraping with Node.js
Tags: javascript, tutorial, node, ai
Published: 2023-09-30 21:27:04

Hey there fellow data digger (we dig at [bytebricks.ai](https://bytebricks.ai/))! The web is a treasure trove of information waiting to be unearthed. And guess what? With a sprinkle of [Cheerio](https://cheerio.js.org/) and a dash of [Node.js](https://nodejs.org/en), you can turn your code into a data-gathering wizard.

But, hey, let's add a fun twist to it! Ever heard of [ChatGPT](https://chat.openai.com/)? 😂 This buddy can take a peek at HTML and whip up the Cheerio code you need to grab that data. Let’s dive into this delicious bowl of Cheerio (pun totally intended) and see how we can make web scraping a breeze.

## Prepping Up

Before we start, make sure Node.js is comfortably nestled in your machine. Create a cozy little space for your project, hop into that directory via the terminal, and kickstart a new Node.js project with a simple:

```
npm init -y
```

Next up, let’s invite Cheerio and [Axios](https://github.com/axios/axios) (our trusty HTTP client) to the party with:

```
npm install cheerio axios
```

## Snagging that HTML

Alright, with the gang all set, let’s nab the HTML of the website we’re eyeing. For this little adventure, we’re gonna pretend we’re extracting goodies from a make-believe e-commerce site.

```
const axios = require('axios');

async function fetchHTML(url) {
  const { data } = await axios.get(url);
  return data;
}

const url = 'https://fictional-ecommerce-site.com';
fetchHTML(url).then(console.log);
```

## Let Cheerio Lead the Way

Got the HTML? Sweet! Now, let’s hand it over to Cheerio for some parsing action.

```
const cheerio = require('cheerio');

async function parseHTML(html) {
  const $ = cheerio.load(html);

  // Let’s pretend each product is nestled
  $('.product').each((i, element) => {
    const title = $(element).find('.product-title').text();
    const price = $(element).find('.product-price').text();

    console.log(`${title}: ${price}`);
  });
}

fetchHTML(url).then(html => parseHTML(html));
```

See what we did there? It’s like we’re using **jQuery!**, but with the turbo engines of Node.js.

## ChatGPT comes handy

Now for the cherry on top! ChatGPT can take a look at HTML and conjure up the Cheerio code you need to snatch that data. Just feed it the HTML, and voila, you’ve got your data extraction code ready to roll. It's like having a buddy who writes code while you munch on snacks!

## Polishing Your Data Scooper

Crafting a web scraper is kinda like brewing the perfect cup of coffee. It needs a little tinkering to hit that sweet spot between speed and accuracy. With Cheerio, Node.js, and a little help from ChatGPT, you’ve got a solid start. Don’t forget to handle those pesky paginations, asynchronous loads, and rate limits to scrape like a pro!😎

## Further

You need to make data useful! at bytebricks we build using a Laravel backend and a Vue front, we find that fast to market and Laravel using SQL have a low ongoing overhead cost! not to mention the magic of [Eloquent](https://laravel.com/docs/10.x/eloquent) as in this example of [whereHas](https://dev.to/bytebricks/unleashing-the-power-of-wherehas-in-laravel-jip) or the very easy integration of [AWS SES](https://dev.to/bytebricks/integrating-aws-simple-email-service-ses-with-laravel-a-comprehensive-guide-1lj3)!