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

Popular posts from this blog

PHP MySql CRUD Dengan Konsep MVC

IT Asset Management Dengan PHP MySQL

Laravel - Sistem Informasi Perpustakaan Sederhana Laravel