Mengakses data JSON Menggunakan Javascript
pada posting Sebelumnya saya sudah sharing cara mengakses JSON dengan php kali ini saya akan sharing cara mengakses JSON menggunakan javascript, untuk projectnya kita menggunakan project yang sama, kita cuma menambahkan file baru yaitu produk.html
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <title>Javascript - JSON</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body class="container"> <h1>Daftar Produk</h1><hr> <div class="row"> <div class="input-group mb-3"> <input type="text" id="produkname" class="form-control" placeholder="Cari Produk"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" id="btn-refresh">Refresh <i class="fa fa-refresh"></i></button> </div> </div> </div> <div class="row" id="daftar-produk"> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <script src="script.js"></script> </body> </html>
dan kita tambahkan javascript seperit dibawah ini dengan nama script.js
this.getAllProduk(); $('#produkname').on('keyup', function(e){ if(e.keyCode == 13) { let namaproduk = $('#produkname').val(); $.getJSON('data.json', function(data){ let produk = data.produk; let content = ''; $('#daftar-produk').html(content); $.each(produk, function(i, data){ var S = data.namaproduk.toLowerCase(); if(S.includes(namaproduk.toLowerCase())){ $('#daftar-produk').append('<div class="col-md-4 mb-3"><div class="card" style="width: 18rem;"><img src="img/'+ data.gambar +'" class="card-img-top" height="300px"><div class="card-body"><h5 class="card-title">'+ data.namaproduk +'</h5><p class="card-text">Harga Rp. '+ data.harga +'</p><a href="#" class="btn btn-primary">Beli</a></div></div></div> '); } }); }); $('#produkname').val(""); } }) $('#btn-refresh').on('click', function(){ getAllProduk(); }); function getAllProduk(){ $('#daftar-produk').html(''); $.getJSON('data.json', function(data){ let produk = data.produk; $.each(produk, function(i, data){ $('#daftar-produk').append('<div class="col-md-4 mb-3"><div class="card" style="width: 18rem;"><img src="img/'+ data.gambar +'" class="card-img-top" height="300px"><div class="card-body"><h5 class="card-title">'+ data.namaproduk +'</h5><p class="card-text">Harga Rp. '+ data.harga +'</p><a href="#" class="btn btn-primary">Beli</a></div></div></div> '); }) }); }
dan silahkan di coba dan lihat hasilnya :D, semoga bermanfaat
Comments
Post a Comment