Cara menggunakan foreach array object javascript

Question

Halo selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang Cara Menampilkan Data Dari Array Object Javascript pembahasan tentang javascript kali ini saya akan menampilkan data dari kumpulan data array object dimana di dalamnya terdapat banyak sekali data dan kemudian kita akan menampilkan dan looping dengan fungsi foreach(){}. Untuk contoh data nya saya memiliki data tentang nama – nama movie dan tahun release kemudian saya akan tampilkan pada tag li dan menambahkan class bootstrap 4. Baik langsung saja teman – teman siapkan data array object nya, atau bisa lihat gambar di bawah ini dan buat file dengan nama index.html

Table of Contents Show

2. Perulangan While di Javascript
3. Perulangan Do/While di Javascript
4. Perulangan Foreach di Javascript
5. Perulangan dengan Method repeat()
6. Bonus: Perulangan Bersarang (Nested)
Apa Selanjutnya?
forEach di javascript untuk apa?
Apa itu array dan object di javascript?
Apa itu Map di javascript?
Apa fungsi forEach pada PHP?

Teman – teman boleh ketik sesuai data pada gambar di atas ini atau mungkin bisa membuat data yang teman – teman inginkan, lanjut pada artikel Cara Menampilkan Data Dari Array Object Javascript ini siapkan tag ul dan berikan id. Karena di dalam tag ul kita akan create element li dan kemudian menambahkan class bootstrap nya, saya membuat tag ul nya dan berikan id dan class bootstrap 4 nya

<ul id="list" class="list-group"></ul>

Kemudian kita akan melooping dengan fungsi foreach sekaligus membuat tag li di dalamnya, pertama panggil nama variabel nya dalam data di atas saya memberikan nama movies

movies.forEach(function(ambilData, data){
 
})

Kemudian di dalam function kita berikan parameter nya untuk mengambil data pada array object nya, selanjutnya kita buat tag li dan tambahkan class bootstrap dengan fungsi create element javascript dan classname

var li = document.createElement('li');
li.className = "list-group-item";

Dan kita tampilkan dengan innerHTML pada id list yang suah saya buat pada tag ul sebelumnya

li.innerHTML = ambilData.title + "  <span class='badge badge-primary'>"+ambilData.releaseDate+"</span>";
document.getElementById("list").appendChild(li);

Jika sudah save dan jalankan pada browsernya, teman – teman bisa lihat hasilnya seperti gambar di bawah ini

Data berhasil di looping dengan fungsi foreach, dan jika kita inspect element tag li juga berhasil di buat di dalam tag ul

Itulah cara menampilkan data dari array object dengan javascript, sekian pada artikel kali ini tentang Cara Menampilkan Data Dari Array Object Javascript dan kita akan lanjut pada artikel yang akan datang. Terimakasih dan sampai jumpa, semoga bermanfaat.

Perulangan

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

0 merupakan perulangan yang termasuk dalam couted loop, karena sudah jelas berapa kali ia akan mengulang.

Flowchart perulangan for

Bentuknya kodenya seperti ini:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Yang perlu diperhatikan adalah kondisi yang ada di dalam kurung setelah kata

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

0.

Kondisi ini akan menentukan:

Hitungan akan dimulai dari

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

2 (

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

3);

Hitungannya sampai berapa? Sampai

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

4;

Lalu di setiap perulangan

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

5 akan bertambah

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

6 (

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

7).

Variabel

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

5 pada perulangan

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

0 berfungsi untuk menyimpan nilai hitungan.

Jadi setiap perulangan dilakukan nilai

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

5 akan selalu bertambah satu. Karena kita menentukannya di bagian

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

7.

Ini hasil outputnya:

Apakah nama variabelnya harus selalu

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

5?

Tidak.

Kita juga bisa menggunakan nama lain.

Misalnya:

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

Pada contoh tersebut, kita melakukan perulangan dimulai dari nol

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

2. Lalu di setiap perulangan nilai variabel

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

4 akan ditambah 2 (

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

5).

Hasilnya:

Bagaimana kalau counter perulangannya dimulai dari akanga yang lebih besar sampai yang ke paling kecil?

Ini biasanya kita buat saat ingin menghitung mundur…

Caranya gampang.

Kita tinggal isi nilai counter dengan nilai terbesarnya.

Misalnya kita akan mulai hitungan dari

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

6 sampai ke

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

2.

Maka nilai

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

8, kita isi awalnya dengan

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

6.

Lalu di kondisi perbandingannya, kita berikan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

0. Artinya perulangan akan dilakukan selama nilai counter lebih besar dari

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

2.

Lalu kita kurangi (

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

2) nilai counter di setiap perulangan (

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3).

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

Hasilnya:

Mengapa tidak sampai nol (

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

2)?

Karena kondisi yang kita berikan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

0. Apabila

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

8 bernilai

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

2, maka kondisi ini akan menjadi

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

8.

Kecuali kita menggunakan operator lebih besar sama dengan (

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

9), maka jika

for(counter = 10; counter > 0; counter--){
    document.write("<p>Perulangan ke "+counter+"</p>");
}

8 bernilai

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

2, kondisi akan menjadi

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

2.

2. Perulangan While di Javascript

Perulangan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3 merupakan perulangan yang termasuk dalam perulangan uncounted loop.

Perulangan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3 juga dapat menjadi perulangan yang counted loop dengan memberikan counter di dalamnya.

Untuk memahami perulangan ini…

…mari kita coba lihat contohnya:

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Bisa disederhanakan menjadi:

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Hasilnya:

Coba perhatikan blok kode

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3:

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

Di sana… Perulangan akan terjadi selama variabel

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

6 brenilai

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

2.

Lalu kita menggunakan fungsi

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

8 untuk menampilkan dialog konfirmasi.

Selama kita memilih Ok pada dialog konfirmasi, maka variabel

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

6 akan terus bernilai

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

2.

Tapi kalau kita pilih Cancel, maka variabel

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

6 akan bernilai

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

8.

Saat variabel

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

6 bernilai

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    var jawab = confirm("Apakah anda mau mengulang?")
    counter++;
    if(jawab == false){
        ulangi = false;
    }
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

8, maka perulangan akan dihentikan.

3. Perulangan Do/While di Javascript

Perulangan

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

5 sama seperti perulangan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3.

Perbedaanya:

Perulangan

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

5 akan melakukan perulangan sebanyak

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

8 kali terlebih dahulu, lalu mengecek kondisi yang ada di dalam kurung

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3.

Bentuknya seperti ini:

do {
    // blok kode yang akan diulang
} while (<kondisi>);

Jadi perbedaanya:

Perulangan

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

5 akan mengecek kondisi di belakang (sesudah mengulang), sedangkan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3 akan mencek kondisi di depan atau awal (sbelum mengulang).

Mari kita coba lihat contohnya:

var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;

do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

Contoh tersebut sama seperti contoh pada perulangan

var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;

while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3.

Saat perulangan pertama, cobalah untuk membatalkan perulangannya dengan memilih Cancel.

Maka hasilnya:

4. Perulangan Foreach di Javascript

Perulangan

do {
    // blok kode yang akan diulang
} while (<kondisi>);

3 biasanya digunakan untuk mencetak item di dalam array.

Perulangan ini termasuk dalam perulangan counted loop, karena jumlah perulangannya akan dituentukan oleh panjang dari array.

Ada dua cara menggunakan perulangan

do {
    // blok kode yang akan diulang
} while (<kondisi>);

3 di Javascript:

Menggunakan

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

0 dengan operator

do {
    // blok kode yang akan diulang
} while (<kondisi>);

6;

Mengguunakan method

do {
    // blok kode yang akan diulang
} while (<kondisi>);

7.

Contoh:

Berikut ini bentuk perulangan “foreach” tanpa menggunakan operator

do {
    // blok kode yang akan diulang
} while (<kondisi>);

6:

var languages = ["Javascript", "HTML", "CSS", "Typescript"];

for(i = 0; i < languages.length; i++){
    document.write(i+". "+ languages[i] + "<br/>");
}

Perulangan ini dapat dibuat lebih sederhana lagi dengan menggunakan operator

do {
    // blok kode yang akan diulang
} while (<kondisi>);

6 seperti ini:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

0

Hasilnya:

Cara kedua membuat perulangan

do {
    // blok kode yang akan diulang
} while (<kondisi>);

3 ialah dengan menggunakan method

do {
    // blok kode yang akan diulang
} while (<kondisi>);

7 dari array.

Contoh:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

1

Method

do {
    // blok kode yang akan diulang
} while (<kondisi>);

7 memiliki parameter berupa fungsi callback. Sebenarnya kita juga bisa menggunakan arrow function seperti ini:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

2

Hasilnya:

Penjelasan tentang arrow function, akan dibahas pada “Tutorial Javascript: Memahami Fungsi di Javascript”.

5. Perulangan dengan Method repeat()

Perulangan dengen method atau fungsi

var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;

do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3 termasuk dalam perulangan counted loop.

Fungsi ini khusus digunakan untuk mengulang sebuah teks (string).

Bisa dibilang:

Ini merupakan singkat dari perulangan

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

0.

Contoh:

Apabila kita menggunakan perulangan

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

0:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

3

Apabila kita menggunakan fungsi

var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;

do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

3:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

4

Hasilnya:

6. Bonus: Perulangan Bersarang (Nested)

Di dalam blok perulangan, kita juga dapat membuat perulangan.

Ini disebut dengan nested loop atau perulangan bersarang atau perulangan di dalam perualangan.

Mari kita coba lihat contohnya:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

5

Hasilnya:

Pada perulangan tersebut, kita menggunakan dua perulangan

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

0.

Perulangan pertama menggunakan variabel

for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}

5 sebagai counter, sedangkan perultangan kedua menggunakan variabel

var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;

do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)

document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");

9 sebagai counter.

Contoh lain:

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

6

Hasilnya:

Nanti, kita akan banyak menggunakan perulangan bersarang saat bekerja dengan array dua dimensi.

Kita dapat membuat perluangan sebanyak mungki di dalam perulangan yang lainnya.

Namun, ini perlu diperhatikan:

Semakin banyak perulangannya, maka komputer akan semakin lama memprosesnya.

Tentu ini akan membuat website atau aplikasi kita berjalan lambat.

Karena itu, gunakanlah perulangan dengan bijak 😊

Apa Selanjutnya?

Intinya perulangan digunakan untuk melakukan pengulangan. Ini merupakan hal dasar yang harus dipahami setiap programmer.

forEach di javascript untuk apa?

forEach() merupakan method array di JavaScript yang mengeksekusi fungsi yang disediakan sekali untuk setiap elemen array. Method ini mengembalikan nilai undefined dan tidak mengubah array asli, tapi jika dibutuhkan kita bisa memodifikasi array sumber di dalam badan fungsi.

Apa itu array dan object di javascript?

Object : jika diartikan ke dalam bahasa indonesia adalah benda / tujuan / sasaran. Array : jika diartikan ke dalam bahasa indonesia adalah susunan / aturan / jajaran. Array[]: untuk tampilkan list bentuk number/angka.

Apa itu Map di javascript?

. map() dapat digunakan untuk melakukan iterasi objek dalam suatu array dan, dengan cara yang serupa seperti array tradisional, memodifikasi konten dari setiap objek individu dan memberikan array yang baru. Modifikasi ini dilakukan berdasarkan apa yang dikembalikan dalam fungsi callback.

Apa fungsi forEach pada PHP?

Perulangan foreach merupakan perulangan khusus untuk pembacaan nilai array. Seperti yang telah kita ketahui setiap array memiliki pasangan key dan value.

kode javascript