Advanced Array Operations

A browser-based exercise in advanced array methods (map, reduce, filter, sort) applied to a music listening dataset. Each task processes the JSON data and renders results directly into the HTML page.

Files

• index.html — The main page with embedded listeningData JSON and result containers for each task.
• solutions.js — Your JavaScript solutions (reads listeningData, computes results, updates the DOM).
• README.md — This file.

What This Does

Five data-processing tasks that practice array methods:

1. Task 1: Aggregate streams by artist and assign tier labels (Platinum/Gold/Silver).
2. Task 2: Group songs by genre, compute averages, counts, and engagement scores.
3. Task 3: Sliding-window scoring to find the best contiguous 4-song group.
4. Task 4: Identify artists with ≥3 genres and their per-genre performance.
5. Task 5: Filter and rank songs by a quality score (rating + streams + duration criteria).

Each task outputs a JSON result to the corresponding DOM element (task1Answer, task2Answer, etc.).

How to Run

Option 1: Open in Browser

Double-click index.html to open it directly in your default browser.

Option 2: Local Server (Recommended)

This gives you cleaner console access and avoids potential CORS issues.

Python 3:

cd /Users/jacobimbus/Desktop/webDev/n320/advanced_array_operations
python3 -m http.server 8000

Then open http://localhost:8000 in your browser.

Node.js (with http-server):

npx http-server

Data Format

The code expects each entry in listeningData to have:

• title (string)
• artist (string)
• genre (string)
• streams (number)
• rating (number)
• duration (number, in seconds)

Missing or incorrectly typed fields are safely skipped by each task.

Task Details

Task 1: Artist Tiers

Returns [{ artist, totalStreams, tier }, ...] sorted by total streams (highest first).

• Platinum: ≥10M streams
• Gold: ≥5M streams
• Silver: <5M streams

Task 2: Genre Metrics

Returns { genre: { avgStreams, avgRating, songCount, engagementScore }, ... }

• Engagement Score = (avgStreams / 1M) × avgRating

Task 3: Best Playlist Window

Returns { startIndex, endIndex, songs, totalScore }

• Scores each 4-song window using: (streams / 1000) + (rating × 500)
• Returns the highest-scoring window.

Task 4: Genre Diversity

Returns [{ artist, genres, genreCount, bestGenre, bestGenreAvgStreams }, ...]

• Only includes artists with ≥3 unique genres.
• Sorted by genre count (descending) then best-genre average streams.

Task 5: Top 10 Quality Playlist

Returns [{ title, artist, qualityScore }, ...] (top 10).

• Filters: rating ≥4.3, streams ≥2M, duration 180–240 seconds.
• Quality Score = (rating × 2) + (streams / 500,000)
• Sorted by quality score (highest first).

Troubleshooting

Results are empty or contain unexpected keys:

• Verify listeningData in index.html has the expected fields (title, artist, genre, streams, rating, duration).
• Open the browser console (F12 or right-click → Inspect → Console) and check for runtime errors.

DOM elements not updating:

• Check that element IDs in solutions.js (task1Answer, task2Answer, etc.) match those in index.html.

"undefined" or "null" values in output:

• Likely caused by missing or malformed data entries — the code skips them, but ensure your JSON is valid.