From 8ef065e2bcc6f42a12791faf3406d49a7c4c5dcf Mon Sep 17 00:00:00 2001 From: Honza Javorek Date: Mon, 25 Aug 2025 20:58:10 +0200 Subject: [PATCH 1/3] style: use dollar variables (saving data) --- .../08_saving_data.md | 54 ++++++++++--------- 1 file changed, 28 insertions(+), 26 deletions(-) diff --git a/sources/academy/webscraping/scraping_basics_javascript2/08_saving_data.md b/sources/academy/webscraping/scraping_basics_javascript2/08_saving_data.md index 332567b92a..b5aca48625 100644 --- a/sources/academy/webscraping/scraping_basics_javascript2/08_saving_data.md +++ b/sources/academy/webscraping/scraping_basics_javascript2/08_saving_data.md @@ -25,7 +25,7 @@ We should use widely popular formats that have well-defined solutions for all th ## Collecting data -Producing results line by line is an efficient approach to handling large datasets, but to simplify this lesson, we'll store all our data in one variable. This'll take three changes to our program: +Producing results line by line is an efficient approach to handling large datasets, but to simplify this lesson, we'll store all our data in one variable. This'll take four changes to our program: ```js import * as cheerio from 'cheerio'; @@ -38,16 +38,15 @@ if (response.ok) { const $ = cheerio.load(html); // highlight-next-line - const data = []; - $(".product-item").each((i, element) => { - const productItem = $(element); + const $items = $(".product-item").map((i, element) => { + const $productItem = $(element); - const title = productItem.find(".product-item__title"); - const titleText = title.text().trim(); + const $title = $productItem.find(".product-item__title"); + const title = $title.text().trim(); - const price = productItem.find(".price").contents().last(); + const $price = $productItem.find(".price").contents().last(); const priceRange = { minPrice: null, price: null }; - const priceText = price + const priceText = $price .text() .trim() .replace("$", "") @@ -62,9 +61,10 @@ if (response.ok) { } // highlight-next-line - data.push({ title: titleText, ...priceRange }); + return { title, ...priceRange }; }); - + // highlight-next-line + const data = $items.get(); // highlight-next-line console.log(data); } else { @@ -72,7 +72,23 @@ if (response.ok) { } ``` -Before looping over the products, we prepare an empty array. Then, instead of printing each line, we append the data of each product to the array in the form of a JavaScript object. At the end of the program, we print the entire array at once. +Instead of printing each line, we now return the data for each product as a JavaScript object. We've replaced `.each()` with [`.map()`](https://cheerio.js.org/docs/api/classes/Cheerio#map-3), which also iterates over the selection but, in addition, collects all the results and returns them as a Cheerio collection. We then convert it into a standard JavaScript array by calling [`.get()`](https://cheerio.js.org/docs/api/classes/Cheerio#call-signature-32). Near the end of the program, we print the entire array. + +:::tip Advanced syntax + +When returning the item object, we use [shorthand property syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#property_definitions) to set the title, and [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to set the prices. It's the same as if we wrote the following: + +```js +{ + title: title, + minPrice: priceRange.minPrice, + price: priceRange.price, +} +``` + +::: + +The program should now print the results as a single large JavaScript array: ```text $ node index.js @@ -91,20 +107,6 @@ $ node index.js ] ``` -:::tip Spread syntax - -The three dots in `{ title: titleText, ...priceRange }` are called [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax). It's the same as if we wrote the following: - -```js -{ - title: titleText, - minPrice: priceRange.minPrice, - price: priceRange.price, -} -``` - -::: - ## Saving data as JSON The JSON format is popular primarily among developers. We use it for storing data, configuration files, or as a way to transfer data between programs (e.g., APIs). Its origin stems from the syntax of JavaScript objects, but people now use it accross programming languages. @@ -202,7 +204,7 @@ In this lesson, we created export files in two formats. The following challenges ### Process your JSON -Write a new Node.js program that reads `products.json`, finds all products with a min price greater than $500, and prints each of them. +Write a new Node.js program that reads the `products.json` file we created in the lesson, finds all products with a min price greater than $500, and prints each of them.
Solution From c7b75a0a0873dc1bfcd1171d28d447c0e1e81893 Mon Sep 17 00:00:00 2001 From: Honza Javorek Date: Wed, 3 Sep 2025 08:54:52 +0200 Subject: [PATCH 2/3] fix: better wording Co-authored-by: gullmar --- .../webscraping/scraping_basics_javascript2/08_saving_data.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sources/academy/webscraping/scraping_basics_javascript2/08_saving_data.md b/sources/academy/webscraping/scraping_basics_javascript2/08_saving_data.md index b5aca48625..a02b9fd56e 100644 --- a/sources/academy/webscraping/scraping_basics_javascript2/08_saving_data.md +++ b/sources/academy/webscraping/scraping_basics_javascript2/08_saving_data.md @@ -204,7 +204,7 @@ In this lesson, we created export files in two formats. The following challenges ### Process your JSON -Write a new Node.js program that reads the `products.json` file we created in the lesson, finds all products with a min price greater than $500, and prints each of them. +Write a new Node.js program that reads the `products.json` file we created in this lesson, finds all products with a min price greater than $500, and prints each of them.
Solution From 53124cd5237c29706da8c3afcec26b2e4de20092 Mon Sep 17 00:00:00 2001 From: Honza Javorek Date: Wed, 3 Sep 2025 08:57:47 +0200 Subject: [PATCH 3/3] fix: change wording also in the Python course --- .../webscraping/scraping_basics_python/08_saving_data.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sources/academy/webscraping/scraping_basics_python/08_saving_data.md b/sources/academy/webscraping/scraping_basics_python/08_saving_data.md index 6567e24efa..d3777b6d34 100644 --- a/sources/academy/webscraping/scraping_basics_python/08_saving_data.md +++ b/sources/academy/webscraping/scraping_basics_python/08_saving_data.md @@ -215,7 +215,7 @@ In this lesson, we created export files in two formats. The following challenges ### Process your JSON -Write a new Python program that reads `products.json`, finds all products with a min price greater than $500, and prints each one using [`pp()`](https://docs.python.org/3/library/pprint.html#pprint.pp). +Write a new Python program that reads the `products.json` file we created in this lesson, finds all products with a min price greater than $500, and prints each one using [`pp()`](https://docs.python.org/3/library/pprint.html#pprint.pp).
Solution