Groceries (CSV)

Home

Dataset Information

For this exercise, we will use a CSV file called "products.csv" that has been uploaded to the Internet. The CSV file contains an inventory of grocery store products. This data was adapted from an open source dataset provided by Instacart in 2017.

Part 1

Write JavaScript code to answer the questions below. Log each of the answers to the console.

  1. Fetch the grocery product data using the provided URL.
  2. Display the number of products (i.e. 20).
  3. Loop through the products and display the name and price of each. Format the prices as currency using a dollar sign and rounding to two decimal places. HINT: you may need to convert the prices to floats before formatting.
  4. Arrive at a unique list of department names, and store them in a variable called departments. HINT: loop through the products, and conditionally add that product's department name to the departments array, only if it is not already included in the array.
  5. Display the number of unique departments (i.e. 10).
  6. Loop through the array of unique departments and display the name of each, formatted as all upper-case.
  7. Use a filter operation to identify the products that have a department name of "beverages", and store them in a variable called beverages.
  8. Display the number of beverage products (i.e. 5).
  9. Display the average price of all the beverage products, formatted as as currency using a dollar sign and rounding to two decimal places (i.e. "$3.04").

Part 2

Write JavaScript code to answer the questions below. Display the answers on the page in the designated areas.

  1. Sort the products by name in ascending order.
  2. Loop through all the sorted products and display the name and price of each, in a separate list item. Use the designated ul element below. Format the prices as currency using a dollar sign and rounding to two decimal places.

Display

Groceries: