forEach dalam JavaScript adalah sebuah metode yang diterapkan pada objek array dan digunakan untuk melakukan iterasi atau pengulangan pada setiap elemen dalam array tersebut.
Di sini, array adalah array yang ingin kamu iterasi dan function adalah fungsi callback yang akan dijalankan untuk setiap elemen dalam array tersebut. Fungsi callback ini bisa menerima tiga argumen:
- element: ini adalah elemen saat ini yang sedang diproses dalam array.
- index (opsional): ini adalah indeks dari elemen saat ini dalam array.
- array (opsional): ini adalah array itu sendiri.
contoh :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <p id="demo"></p> <p id="divA"></p> <p id="div1"></p> <p id="div2"></p> <p id="divxx"></p> <script src="<?php echo assets_url() ?>vendors/jquery/jquery-3.6.0.min.js"></script> <script> $.ajax({ url: 'https://api.myquran.com/v2/doa/sumber', type: "get", dataType: "json", success: function(detail) { var htA = ''; var list = detail['data']; for (var sumber of list) { // var sumber = detail['data'][i]; htA += ' <option value="?id=' + sumber + '">' + sumber + "</option>"; } $("#divA").html(htA); }, }); $.ajax({ url: 'https://equran.id/api/v2/surat/1', type: "get", dataType: "json", success: function(detail) { var htA = detail['data']['nama'] + '(' + detail['data']['namaLatin'] + ')'; var ket = detail['data']['deskripsi']; var htB = ''; var list = detail['data']['ayat']; for (var object of list) { htB += object.teksArab + '</br>'; htB += object.teksLatin + '</br>'; htB += object.teksIndonesia + '</br>'; htB += '<hr>'; } $("#div1").html(htA); $("#div2").html(ket); $("#divxx").html(htB); }, }); // Create an Array const fruits = ["Banana", "Orange", "Apple", "Mango"]; // Create an Iterator const list = fruits.entries(); // List the Entries let text = ""; for (let x of list) { text += x + "<br>"; } // document.getElementById("demo").innerHTML = text; $("#demo").html(text); </script> |
Contoh 2 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <link href="<?php echo assets_url() ?>css/style.min.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="<?php echo assets_url() ?>css/custom.css"> <section class="page-header"> <div class="page-header-bg" style="background-image: url(<?= img_media($informasi['img_breadcrumb']); ?>)"> </div> <div class="container"> <div class="page-header__inner"> <h2>Do'a</h2> <ul class="thm-breadcrumb list-unstyled"> <li><a href="<?= baseURL() ?>">Home</a></li> <li><span>/</span></li> <li>Do'a</li> </ul> </div> </div> </section> <section class="service-details"> <div class="container"> <div class="section-title text-center"> <h2 class="section-title__title">Kumpulan Do'a</h2> </div> <div class="card"> <div class="card-body"> <div class="mb-3"> <div class="input-group mb-3"> <button class="btn btn-success"><i class="icon-magnifying-glass"></i> Cari Doa</button> <select class="form-select form-select-lg" id="divA" onchange="javascript:location.href = this.value;"> </select> </div> </div> </div> <div class="card-body"> <div id="divxx"> </div> </div> </div> </div> </section> <script src="<?php echo assets_url() ?>vendors/jquery/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $.ajax({ url: 'https://api.myquran.com/v2/doa/sumber', type: "get", dataType: "json", success: function(detail) { var htA = ''; var list = detail['data']; for (var sumber of list) { htA += ' <option value="?id=' + sumber + '">' + sumber + "</option>"; } $("#divA").html(htA); }, }); let data = new URLSearchParams(window.location.search); let datax = data.get("id"); $.ajax({ url: 'https://api.myquran.com/v2/doa/sumber/' + datax, type: "get", dataType: "json", success: function(detail, index) { var htB = ''; var list = detail['data']; for (var object of list) { htB += '<div></div>'; htB += '<div class="mb-2">'; htB += '<div class="justify-content-center align-self-center text-center" style="line-height:60px;font-size:25px;"><b>' + object.judul + '</b></div>'; htB += '<div class=" justify-content-center align-self-center arab text-end fw-bold" style="line-height:60px;font-size:25px;"><b>' + object.arab + '</b></div>'; htB += '<div class="justify-content-center text-start px-3 mb-2">Artinya :</div>'; htB += '<div class="justify-content-center text-start px-3 mb-2"><cite>' + object.indo + '</cite></div>'; htB += '</div><hr>'; } $("#divxx").html(htB); }, }); </script> |