Mission 08 / Data-driven UI

Search, Sort and Storage

Derive a live table from search text, a difficulty filter and XP sorting—then remember the controls.

Hard100 XPfilter()sort()JSON

State → derived view

Keep the source array unchanged

Every control change starts with the practice missions, filters into a new array and sorts a copy. The selected controls are saved with JSON.stringify() and restored with JSON.parse().

Interactive task

Find a practice mission

Search by title

Difficulty

Sort by XP

Filtered practice missions
Title	Difficulty	XP

Try a search, a difficulty and both sort directions. Then confirm you reviewed the data flow.