Generate HTML Based on JSON

Apa Itu WordPress REST API?

Istilah yang belum disebutkan di video sebelumnya: WordPress REST API = kumpulan URL yang mengembalikan JSON data.

CRUD Operations

REST API mendukung operasi CRUD:

• Create — membuat post baru
• Read — membaca/load data (yang kita lakukan sekarang)
• Update — mengubah post yang ada
• Delete — menghapus post

Saat ini kita hanya menggunakan Read. Nanti di kursus akan belajar Create, Update, Delete juga.

Referensi

Dokumentasi resmi: WordPress REST API Handbook

Template Literal (Backticks) untuk HTML

Masalah: HTML Satu Baris

// Ini sangat susah dibaca:
this.resultsDiv.html("<h2>General Information</h2><ul><li><a href='#'>Click me</a></li></ul>");

Solusi: Template Literal dengan Backtick (`)

this.resultsDiv.html(`
  <h2 class="search-overlay__section-title">General Information</h2>
  <ul class="link-list min-list">
    <li>
      <a href="${posts[0].link}">${posts[0].title.rendered}</a>
    </li>
  </ul>
`);

Fitur Template Literal:

1. Multi-line — bisa tulis HTML di baris berbeda tanpa backslash (\)
2. ${expression} — evaluasi JavaScript di dalam template literal
3. ${} di sini bukan jQuery, ini fitur native JavaScript (ES6)

Catatan .bind(this) vs Arrow Function

Ketika callback function menggunakan this, ada 2 cara agar this tetap merujuk ke object utama:

Cara 1: .bind(this)

$.getJSON(url, function(posts) {
  this.resultsDiv.html("...");
}.bind(this));

Cara 2: Arrow Function (ES6) ← lebih ringkas

$.getJSON(url, (posts) => {
  this.resultsDiv.html("...");
});

Arrow function tidak mengubah nilai this — tetap menunjuk ke object parent.

Looping dengan .map() dan .join()

Masalah: Hanya Menampilkan 1 Hasil

// Hardcoded ke posts[0] — hanya item pertama
posts[0].title.rendered

Solusi: Loop dengan .map() + .join('')

this.resultsDiv.html(`
  <h2 class="search-overlay__section-title">General Information</h2>
  <ul class="link-list min-list">
    ${posts.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}
  </ul>
`);

Penjelasan Step-by-Step:

1. posts.map(item => ...) — membuat versi baru array, menjalankan function untuk setiap item
2. Arrow function item => — shorthand, tidak perlu function keyword
3. Template literal di dalam .map() — setiap item menghasilkan <li> HTML
4. .join('') — mengubah array menjadi string tanpa koma separator

Contoh Sederhana:

var testArray = ["red", "orange", "yellow"];

// Di dalam template literal:
${testArray.map(item => `<li>${item}</li>`).join('')}

// Hasil:
// <li>red</li><li>orange</li><li>yellow</li>

Hasil Akhir:

• Search "lorem" → menampilkan semua post yang cocok sebagai list item
• Setiap item bisa diklik (link ke post asli)