Transformasi Data untuk UI
Merapikan data mentah dengan map, filter, sort, dan bentuk object yang siap dirender.
Tujuan belajar
- Membedakan data mentah dari data siap render
- Memakai filter, sort, dan map secara berurutan
- Membuat object UI yang lebih mudah dipakai render function
Isi lesson
5 blok- 1.UI sebaiknya tidak menanggung data mentahBelum selesaiWajib
- 2.Dari data mentah ke data siap renderBelum selesaiWajib
- 3.Pisahkan transform dan renderBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
UI sebaiknya tidak menanggung data mentah
WajibData dari API, localStorage, atau file sering belum nyaman untuk langsung dirender. Nama field bisa terlalu teknis, urutannya belum benar, sebagian item tidak aktif, atau value masih perlu dirapikan.
Transformasi data berarti menyiapkan data sebelum masuk ke render function. Hasilnya, render function bisa fokus menampilkan UI, bukan membersihkan data di tengah template.
Bagian ini memengaruhi progres lesson.
Dari data mentah ke data siap render
Wajibconst rawLessons = [
{ title: " Async ", minutes: 30, published: true, order: 2 },
{ title: "Scope", minutes: 25, published: true, order: 1 },
{ title: "Draft", minutes: 10, published: false, order: 3 },
];
const visibleLessons = rawLessons
.filter((lesson) => lesson.published)
.sort((first, second) => first.order - second.order)
.map((lesson) => ({
title: lesson.title.trim(),
meta: lesson.minutes + " menit",
}));
console.log(visibleLessons);filter membuang data yang tidak perlu tampil, sort mengatur urutan, dan map membentuk object yang lebih siap dipakai UI.
Bagian ini memengaruhi progres lesson.
Tips
WajibPisahkan transform dan render
Kalau render function mulai penuh dengan if kecil, trim, sort, dan label formatting, pindahkan pekerjaan itu ke function transform. Ini membuat bug data lebih mudah dicari.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususTransform data mentah untuk UI
Latihan menyiapkan data lesson agar render function menerima data yang sudah rapi.
Tujuan awal: Fokus di tab JS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Data mentah belum tentu cocok langsung masuk UI.
- filter, sort, dan map bisa disusun menjadi pipeline yang mudah dibaca.
- Render function lebih bersih jika menerima data yang sudah siap tampil.
- Berikutnya, kamu akan memakai Network panel untuk mencari masalah data dari request.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: UI sebaiknya tidak menanggung data mentah.