Skip to content

style: use dollar variables (locating elements) #1841

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 3, 2025
Merged

style: use dollar variables (locating elements) #1841

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
211a176
style: use dollar variables (locating elements)
honzajavorek Aug 25, 2025
a7feff1
feat: explain dollar sign variable names
honzajavorek Jul 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 32 additions & 28 deletions sources/academy/webscraping/scraping_basics_javascript2/06_locating_elements.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,15 @@ if (response.ok) {
const $ = cheerio.load(html);

$(".product-item").each((i, element) => {
const productItem = $(element);
const $productItem = $(element);

const title = productItem.find(".product-item__title");
const titleText = title.text();
const $title = $productItem.find(".product-item__title");
const title = $title.text();

const price = productItem.find(".price");
const priceText = price.text();
const $price = $productItem.find(".price");
const price = $price.text();

console.log(`${titleText} | ${priceText}`);
console.log(`${title} | ${price}`);
});
} else {
throw new Error(`HTTP ${response.status}`);
Expand All @@ -108,6 +108,12 @@ Sony XBR-950G BRAVIA 4K HDR Ultra HD TV |

There's still some room for improvement, but it's already much better!

:::info Dollar sign variable names

In jQuery and Cheerio, the core idea is a collection that wraps selected objects, usually HTML elements. To tell these wrapped selections apart from plain arrays, strings or other objects, it's common to start variable names with a dollar sign. This is just a naming convention to improve readability. The dollar sign has no special meaning and works like any other character in a variable name.

:::

## Precisely locating price

In the output we can see that the price isn't located precisely. For each product, our scraper also prints the text `Sale price`. Let's look at the HTML structure again. Each bit containing the price looks like this:
Expand Down Expand Up @@ -170,16 +176,16 @@ if (response.ok) {
const $ = cheerio.load(html);

$(".product-item").each((i, element) => {
const productItem = $(element);
const $productItem = $(element);

const title = productItem.find(".product-item__title");
const titleText = title.text();
const $title = $productItem.find(".product-item__title");
const title = $title.text();

// highlight-next-line
const price = productItem.find(".price").contents().last();
const priceText = price.text();
const $price = $productItem.find(".price").contents().last();
const price = $price.text();

console.log(`${titleText} | ${priceText}`);
console.log(`${title} | ${price}`);
});
} else {
throw new Error(`HTTP ${response.status}`);
Expand Down Expand Up @@ -243,18 +249,17 @@ Djibouti
const $ = cheerio.load(html);

$(".wikitable").each((i, tableElement) => {
const table = $(tableElement);
const rows = table.find("tr");

rows.each((j, rowElement) => {
const row = $(rowElement);
const cells = row.find("td");

if (cells.length > 0) {
const thirdColumn = $(cells[2]);
const link = thirdColumn.find("a").first();
const linkText = link.text();
console.log(linkText);
const $table = $(tableElement);
const $rows = $table.find("tr");

$rows.each((j, rowElement) => {
const $row = $(rowElement);
const $cells = $row.find("td");

if ($cells.length > 0) {
const $thirdColumn = $($cells[2]);
const $link = $thirdColumn.find("a").first();
console.log($link.text());
}
});
});
Expand Down Expand Up @@ -289,10 +294,9 @@ Simplify the code from previous exercise. Use a single for loop and a single CSS
const $ = cheerio.load(html);

$(".wikitable tr td:nth-child(3)").each((i, element) => {
const nameCell = $(element);
const link = nameCell.find("a").first();
const linkText = link.text();
console.log(linkText);
const $nameCell = $(element);
const $link = $nameCell.find("a").first();
console.log($link.text());
});
} else {
throw new Error(`HTTP ${response.status}`);
Expand Down
Loading