diff --git a/sources/academy/webscraping/scraping_basics_javascript2/06_locating_elements.md b/sources/academy/webscraping/scraping_basics_javascript2/06_locating_elements.md index 872e645d30..407ba9510e 100644 --- a/sources/academy/webscraping/scraping_basics_javascript2/06_locating_elements.md +++ b/sources/academy/webscraping/scraping_basics_javascript2/06_locating_elements.md @@ -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}`); @@ -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: @@ -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}`); @@ -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()); } }); }); @@ -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}`);