Mengakses data JSON Menggunakan Javascript - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Mengakses data JSON Menggunakan Javascript, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel javascript, Artikel JSON, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Mengakses data JSON Menggunakan Javascript
link : Mengakses data JSON Menggunakan Javascript

Baca juga


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


Demikianlah Artikel Mengakses data JSON Menggunakan Javascript

Sekianlah artikel Mengakses data JSON Menggunakan Javascript kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Mengakses data JSON Menggunakan Javascript dengan alamat link https://dev-create.blogspot.com/2019/01/mengakses-data-json-menggunakan.html