Mengenal JSON DWI SUSANTO Mengenal JSON Javascript Object

Mengenal JSON DWI SUSANTO

Mengenal JSON Javascript Object Javascript String Manipulation JSON Introduction

Javascript Object Javascript merupakan bahasa yang object oriented Sebuah object berisi klasifikasi yang menunjukkan pengelompokan bentuk -bentuk tertentu

Array Berbeda dengan object, array menggunakan key, atau index sebagai referensi terhadap isinya Array sendiri sebenarnya merupakan turunan dari Object Untuk mengakses data dalam array, tidak menggunakan dot selayaknya object, akan tetapi menggunakan nomor key

Array (Lanjutan) Sebagai keturunan object, maka semua instance dari array dapat menggunakan method to. String()

Bermain Array & Object Data array dimasukkan ke dalam child dari object

Object Dengan Multiple Key

String Manipulation

Menyambungkan String Mengatur format data

Property Pada String Contoh Penggunaan

JSON Javascript Object Notation

Tentang JSON Merupakan subset dari Javascript Json bukan bahasa pemrograman, tapi merupakan sebuah format untuk tukar menukar data Pertukaran data sangat mungkin terjadi baik antar browser maupun antar server

Struktur • Diawali dengan tanda kurawal { dan di akhiri dengan tanda kurawal tutup } • Pada bagian content: • dapat berisi pasangan string dan value • Pasangan string dan value dapat lebih dari satu pasang • Tiap pasangan string dan value dipisahkan dengan tanda koma

Contoh Format Data JSON

Format Data JSON • Object key tidak selalu harus ditulis secara eksplisit sebagai sebuah string • Pada operasi background, Javascript akan merubah semua yang diidentifikasi sebagai sebuah key menjadi String

JSON Value • Gambar berikut menunjukkan jenis-jenis value yang dapat ditampung dalam JSON

Latihan JSON

Latihan JSON Menggunakan JSON. parse untuk merubah string dengan isi json menjadi format json

Latihan JSON Hasil Output Menggunakan stringify untuk merubah object beserta propertynya menjadi sebuah format data json

Latihan JSON Array dalam JS dapat kita buat seperti berikut ini Cara ini mirip dengan array assosiativ Dalam bahasa pemrograman lainnya, dapat kita buat dalam asosiativ array seperti berikut ini JS tidak mendukung model asosiativ array tersebut, tapi dengan menggunakan JSON, hal tersebut dapat dilakukan

Latihan JSON Tambahkan data nomor HP dan tampilkan hasilnya

Latihan JSON Rubah data dalam tabel berikut menjadi format json, dan tampilkan hasilnya menggunakan javascript. Judul Pengarang Penerbit Harga Laskar Pelangi Andrea Hirata Bentang Pustaka 65000

JSON Nested Data Structure

Membuat Shopping Cart

Membuat Halaman Product Detail Buka kembali project toko online yang anda buat dengan menggunakan Bootstrap Silahkan download asset gambar produk, dan letakkan folder products didalam folder img Buat file baru pada folder yang sama dengan nama product. Detail. html Silahkan copy paste dari file html sebelumnya untuk mendapatkan header, navigasi, dan footer yang sama Untuk bagian content, silahkan mengikuti slide berikutnya

Diantara Nav dan footer, tambahkan script berikut ini: <div class="container-fluid mb-5"> <div class="row"> <div class="col-md-12 text-center display-4"> Our Armchair Collection </div> <div class="row mt-0"> <div class="col-md-3 mb-5"></div> <div class="col-md-9 mb-5"></div>

<div class="col-md-3 mb-5"> Pada col-md-3 mb-5 yang berada dalam class row mt -0, rubah menjadi seperti ini <div class="card h-70"> <div class="card-body"> <h 4 class="card-title">Price Range from</h 4> <div class="custom-control custom-radio"> <input type="radio" id="custom. Radio 1" name="custom. Radio" class="custom-control-input" checked> <label class="custom-control-label" for="custom. Radio 1">All</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="custom. Radio 2" name="custom. Radio" class="custom-control-input"> <label class="custom-control-label" for="custom. Radio 2">800 to 1000</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="custom. Radio 3" name="custom. Radio" class="custom-control-input"> <label class="custom-control-label" for="custom. Radio 3">500 to 799</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="custom. Radio 4" name="custom. Radio" class="custom-control-input"> <label class="custom-control-label" for="custom. Radio 4">up to 499</label> </div> <hr /> <h 4 class="card-title">Some Other Info 1</h 4> <p class="card-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 s, when an unknown printer took a galley of type and scrambled </p> </div> <div class="card shopping-cart mt-1 h-25"> <div class="card-body" id="shoppingcart"> <h 4 class="card-title">Shooping Cart</h 4> <ul></ul> <div class="button btn-danger" id="empty. Cart"> Empty Cart </div>

>div class="col-md-9 mb-5<" Pada col-md-9 mb-5 yang berada dalam class row mt-0, rubah menjadi seperti ini > div class="row mt-0"> <div class="col-md-6"> <div class="card h-100"> <div class="card-body"> <h 4 class="card-title">ROW-AC-001: : Product Images</h 4> <div class="text-center"> <img class="card-img-top col-md-5 px-0" src=". /img/product/row_ac 001_0. jpg" alt="armchair image"> <img class="card-img-top col-md-5 px-0" src=". /img/product/row_ac 001_1. jpg" alt="armchair image"> <img class="card-img-top col-md-5 px-0" src=". /img/product/row_ac 001_2. jpg" alt="armchair image"> <img class="card-img-top col-md-5 px-0" src=". /img/product/row_ac 001_3. jpg" alt="armchair image"> <img class="card-img-top col-md-5 px-0" src=". /img/product/row_ac 001_4. jpg" alt="armchair image"> <img class="card-img-top col-md-5 px-0" src=". /img/product/row_ac 001_5. jpg" alt="armchair image"> </div> <div class="col-md-6"> <div class="card h-100"> <div class="card-body"> <h 4 class="card-title">ROW-AC-001: : Product Details</h 4> <hr /> <p class="card-text"> Item code: row_ac 001 Dimension: H: 85 W: 67 D: 72 Price (SGD): 850 </p> <hr /> <h 6 class="card-title">Description</h 6> <p class="card-text"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p> <hr /> <div class="text-center"> <a href="" class="btn btn-primary addtocartbutton" data-item="ROW-AC-001" data-price="850"> Add to Chart</a> <a href=". /collections. html" class="btn btn-primary">Back to Collection</a> </div> </div< />div<

Hasil Tampilan Apabila hasil yang diperoleh belum seperti gambar disamping, silahkan rapikan terlebih dahulu.