AI Frontend · Exercise 4 of 4 Previous
Advanced
Show a Basket While It Is Being Written
The route /api/basket streams JSON text: { "orderId": …, "items": [ { "name": …, "qty": … }, … ] }. When #load is clicked, read the stream and update the page after every piece, using parsePartialJson from ai.
Show #order as the order id (or … until it arrives) and one <li> per item in #items as Name × qty, with … for a name or quantity that has not arrived. The page must never contain the word undefined. Set #status to Loading while the stream runs and Done at the end.
What Check tests
- While streaming and after: never the word
undefined, and the final basket has both items - The final list reads
Masala chai × 2andGinger biscuits × 1 #statusends asDone- The code uses
parsePartialJson
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.