Cara menggunakan JSONLIST di JavaScript

Question

Bagaimana jika ada 100 produk, apakah kita mengalikan variabel dengan 100 dan menghasilkan

var products = ["Flashdisk", "SDD", "Monitor"];

4 dengan 100x?

Table of Contents Show

Apa itu Array?
Cara Membuat Array di Javascript
Cara Mengambil Data dari Array
Cetak isi Array dengan Looping
Cara Menambahkan Data ke Array
Cara Menghapus Data Larik
Menghapus Data dari Depan
Menghapus Data pada Indeks Tertentu
Mengubah isi Array
Metode penting pada Array
1. Metode document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);_9
2. Metode <!DOCTYPE html> <html lang="en"> <head> <title>Array dan perulangan</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; document.write("<h3>Daftar Produk:</h3>"); document.write("<ol>"); // menggunakan perulangan untuk mencetak semua isi array for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); } document.write("</ol>"); </script> </body> </html>_3
3. Metode <!DOCTYPE html> <html lang="en"> <head> <title>Array dan perulangan</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; document.write("<h3>Daftar Produk:</h3>"); document.write("<ol>"); // menggunakan perulangan untuk mencetak semua isi array for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); } document.write("</ol>"); </script> </body> </html>_4
Apa berikutnya?
Apa itu JSONJS?
Kapan menggunakan JSON?
Untuk apa JSON digunakan?
Bagaimana cara membuka file JSON?

Capek donk

Oleh karena itu, kita harus menggunakan Array

Apa itu Array?

Sebelum kita membahas Array, mari kita bahas terlebih dahulu apa itu struktur data?

Struktur data adalah cara atau metode yang digunakan untuk menyimpan data dalam memori komputer

Salah satu struktur data yang sering digunakan dalam pemrograman adalah Array

Array adalah struktur data yang digunakan untuk menyimpan sekelompok data di satu tempat

Setiap data di dalam Array memiliki indeks, sehingga kita akan dengan mudah memprosesnya

Indeks array selalu dimulai dari nol (

var products = ["Flashdisk", "SDD", "Monitor"];

5)

Pada teori struktur data…

...Ukuran array akan bergantung pada jumlah data yang disimpan di dalamnya

Cara Membuat Array di Javascript

Dalam javascript, kita dapat membuat array dengan tanda kurung siku (

var products = ["Flashdisk", "SDD", "Monitor"];

6)

Contoh

var products = [];

Maka variabel

var products = ["Flashdisk", "SDD", "Monitor"];

_7 akan berisi array kosong

Kita dapat mengisi data ke dalam array, kemudian setiap data dipisahkan dengan koma (

var products = ["Flashdisk", "SDD", "Monitor"];

8)

Contoh

var products = ["Flashdisk", "SDD", "Monitor"];

Oya, karena javascript adalah bahasa pemrograman pengetikan yang dinamis...

...kemudian kita dapat menyimpan dan mencampur apa saja di dalam array

Contoh

var myData = [12, 2.1, true, 'C', "Petanikode"];

Cara Mengambil Data dari Array

Seperti yang sudah kita ketahui…

Array akan menyimpan sekelompok data dan memberinya nomor indeks untuk memudahkan akses

Indeks array selalu diinisialisasi dari nol

var products = ["Flashdisk", "SDD", "Monitor"];

5

Misalkan kita memiliki array seperti ini

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

_

Bagaimana kita mengambil nilai

var myData = [12, 2.1, true, 'C', "Petanikode"];

0?

Jawabannya seperti ini

makanan[1] //-> "Mie Ayam"

Mengapa tidak

var myData = [12, 2.1, true, 'C', "Petanikode"];

_1?

Ingat. indeks array selalu dimulai dari nol

Agar lebih jelas, mari kita coba dalam sebuah program

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mengambil data dari array</title>
</head>
<body>
    <script>
        // membuat array
        var products = ["Senter", "Radio", "Antena", "Obeng"];

        // mengambil radio
        document.write(products[1]);
    </script>
</body>
</html>

Hasil

Cetak isi Array dengan Looping

Kita bisa mencetak semua isi array satu per satu seperti ini

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

Bagaimana jika array berisi

var myData = [12, 2.1, true, 'C', "Petanikode"];

_2?

Tentu saja kita tidak ingin menulis

var myData = [12, 2.1, true, 'C', "Petanikode"];

2 baris kode untuk mencetak array

Solusinya. Gunakan pengulangan

Mari kita lihat sebuah contoh

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Array dan perulangan</title>
</head>
<body>
    <script>
        // membuat array
        var products = ["Senter", "Radio", "Antena", "Obeng"];

        document.write("<h3>Daftar Produk:</h3>");
        document.write("<ol>");
        // menggunakan perulangan untuk mencetak semua isi array
        for(let i = 0; i < products.length; i++){
            document.write(`<li>${ products[i] }</li>`);
        }
        document.write("</ol>");
    </script>
</body>
</html>

Hasil

Perhatian…

Pada contoh di atas, kita menggunakan properti

var myData = [12, 2.1, true, 'C', "Petanikode"];

4 untuk mengambil panjang array

Kami memiliki

var myData = [12, 2.1, true, 'C', "Petanikode"];

_5 data dalam array

var products = ["Flashdisk", "SDD", "Monitor"];

7, maka properti

var myData = [12, 2.1, true, 'C', "Petanikode"];

4 akan menjadi

var myData = [12, 2.1, true, 'C', "Petanikode"];

5

Kemudian kami menggunakan properti ini untuk membatasi jumlah iterasi di for

for(let i = 0; i < products.length; i++){
    document.write(`<li>${ products[i] }</li>`);
}

...dan di blok for, kami mencetak konten produk dengan indeks yang mengacu pada variabel

var myData = [12, 2.1, true, 'C', "Petanikode"];

9

Cara lain

Kita dapat menggunakan pengulangan dengan metode

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

_0

Contoh

var products = [];

0

Hasilnya akan sama seperti di atas

Cara Menambahkan Data ke Array

Ada dua cara untuk menambahkan data ke array

Isi menggunakan indeks;

Isi menggunakan metode

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

_1

Mengisi dengan indeks berarti ini…

Misalnya, kami memiliki array dengan konten berikut

var products = [];

1

Ada tiga data dalam array

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

_2 dengan indeks

var products = ["Flashdisk", "SDD", "Monitor"];

5.

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

_4

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

_5.

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

_6

var myData = [12, 2.1, true, 'C', "Petanikode"];

1.

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

_8

Kami ingin menambahkan lebih banyak data ke indeks ke-______9_______9, sehingga kami dapat melakukannya seperti ini

var products = [];

2

Sekarang array

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

2 akan berisi

var myData = [12, 2.1, true, 'C', "Petanikode"];

5 data

Mari kita coba di konsol Javascript

Itu benar…

makanan[1] //-> "Mie Ayam"

_2 kami berhasil menambahkan ke array

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

2

Tetapi kerugian dari metode ini adalah

Kita harus mengetahui jumlah data atau panjang array, baru kita bisa menambahkan

Jika kita memasukkan nomor indeks secara acak, yang terjadi nanti adalah data dalam indeks akan tertimpa

Lalu apa solusinya?

Kami menggunakan metode

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

_1

Kita tidak perlu mengetahui panjang array, karena metode

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

1 akan menambahkan data ke array dari belakang atau belakang

Contoh

var products = [];

_3

Jadi hasilnya

Kita juga bisa menambahkan beberapa data sekaligus dengan cara ini

var products = [];

_4

Cara Menghapus Data Larik

Sama seperti menambahkan data ke array, menghapus data juga memiliki dua cara

Menggunakan
```
makanan[1] //-> "Mie Ayam"
```
_6;
Menggunakan metode
```
makanan[1] //-> "Mie Ayam"
```
_7

Contoh

var products = [];

5

Kami dapat menghapus data dengan nomor indeks tertentu dengan

makanan[1] //-> "Mie Ayam"

6. Sementara

makanan[1] //-> "Mie Ayam"

_7 akan dihapus dari belakang

Kerugian dari

makanan[1] //-> "Mie Ayam"

_6, ini akan membuat ruang kosong di dalam array

Eksperimen di konsol

Tentu ini tidak baik…

...karena array akan tetap memiliki panjang

var myData = [12, 2.1, true, 'C', "Petanikode"];

5

Metode kedua menggunakan metode

makanan[1] //-> "Mie Ayam"

7, kebalikan dari metode

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

1

Metode

makanan[1] //-> "Mie Ayam"

_7 akan menghapus array di belakang

Array dalam javascript dapat dilihat sebagai stack, yang memiliki properti LILO (Last in Last out)

Mari kita coba di konsol

Kami memanggil metode

makanan[1] //-> "Mie Ayam"

7

var myData = [12, 2.1, true, 'C', "Petanikode"];

5 kali, maka array akan kosong

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mengambil data dari array</title>
</head>
<body>
    <script>
        // membuat array
        var products = ["Senter", "Radio", "Antena", "Obeng"];

        // mengambil radio
        document.write(products[1]);
    </script>
</body>
</html>

7. Karena isinya hanya

var myData = [12, 2.1, true, 'C', "Petanikode"];

_5

Metode

makanan[1] //-> "Mie Ayam"

_7 akan mengembalikan nilai item atau data yang telah dihapus dari array

Menghapus Data dari Depan

Kami juga dapat menghapus data dari depan dengan menggunakan metode

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

0

Contoh

var products = [];

6

Jadi data yang dihapus adalah

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

1

Eksperimen di konsol

Menghapus Data pada Indeks Tertentu

Jika kita ingin menghapus data pada index tertentu, maka fungsi atau method yang digunakan adalah

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

2

Fungsi ini memiliki dua parameter yang harus disediakan

var products = [];

_7

Keterangan

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

_3 adalah indeks data dalam array yang akan dihapus;

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

_4 adalah jumlah data yang akan dihapus dari indeks

Biasanya kita memberikan nilai total dengan nilai

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

5 sehingga data yang terhapus hanya satu

Contoh

var products = [];

8

Eksperimen di konsol

Pada percobaan di atas, jika kita tidak mengisi

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

4 data yang akan dihapus, maka semua data dari indeks yang dipilih akan dihapus

Mengubah isi Array

Untuk mengubah isi array, kita bisa mengisi ulang seperti ini

var products = [];

_9

Jadi

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

_7 akan digantikan oleh

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

8

Eksperimen di konsol

Sangat mudah bukan…

Metode penting pada Array

Selain metode atau fungsi yang sudah kita coba di atas, ada beberapa metode dalam Array yang perlu kita ketahui

1. Metode document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);_9

Metode

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

_9 berfungsi untuk memfilter data dari array

Parameter yang harus diberikan pada metode

document.write(products[0]);
document.write(products[1]);
document.write(products[2]);
document.write(products[3]);
document.write(products[4]);

_9 sama dengan metode

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

0 yaitu. fungsi panggilan balik

Contoh

var products = ["Flashdisk", "SDD", "Monitor"];

0

Pada contoh di atas, kita memberikan fungsi panah sebagai fungsi callback yang akan memfilter array

Sebenarnya kita bisa membuatnya lebih sederhana seperti ini

var products = ["Flashdisk", "SDD", "Monitor"];

_1

2. Metode <!DOCTYPE html> <html lang="en"> <head> <title>Array dan perulangan</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; document.write("<h3>Daftar Produk:</h3>"); document.write("<ol>"); // menggunakan perulangan untuk mencetak semua isi array for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); } document.write("</ol>"); </script> </body> </html>_3

Metode ini berfungsi untuk memeriksa apakah suatu data ada di dalam array atau tidak. Biasanya digunakan untuk melakukan pencarian untuk memastikan data sudah ada di dalam array

Contoh

var products = ["Flashdisk", "SDD", "Monitor"];

_2

3. Metode <!DOCTYPE html> <html lang="en"> <head> <title>Array dan perulangan</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; document.write("<h3>Daftar Produk:</h3>"); document.write("<ol>"); // menggunakan perulangan untuk mencetak semua isi array for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); } document.write("</ol>"); </script> </body> </html>_4

Metode

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Array dan perulangan</title>
</head>
<body>
    <script>
        // membuat array
        var products = ["Senter", "Radio", "Antena", "Obeng"];

        document.write("<h3>Daftar Produk:</h3>");
        document.write("<ol>");
        // menggunakan perulangan untuk mencetak semua isi array
        for(let i = 0; i < products.length; i++){
            document.write(`<li>${ products[i] }</li>`);
        }
        document.write("</ol>");
    </script>
</body>
</html>

_4 berfungsi untuk mengurutkan data pada array

Contoh

var products = ["Flashdisk", "SDD", "Monitor"];

_3

Apa berikutnya?

Kita telah mempelajari tentang dasar-dasar array dalam javascript, seperti membuat array, menambahkan data ke array, mengubah data menjadi array, menghapus data dari array, dan juga metode-metode yang umum digunakan dalam array.

Masih banyak cara yang belum kami coba

Saran saya

Seringlah berlatih

Gunakan konsol Javascript untuk mencoba metode pada Array

Selanjutnya kita akan belajar tentang fungsi-fungsi dalam Javascript untuk membuat program yang lebih terstruktur. Dan disana kita akan membuat sebuah aplikasi dengan menggunakan array sebagai tempat penyimpanan data

Apa itu JSONJS?

JSON (JavaScript Object Notation) adalah format file berbasis teks yang umumnya digunakan dalam proses pertukaran data antara server dan klien. File JSON memiliki ekstensi. json serta menggunakan teks yang dapat dibaca oleh manusia dan dimengerti oleh komputer.

Kapan menggunakan JSON?

Untuk aplikasinya, JSON digunakan untuk mengirim data dengan cara data didekodekan dan dikirim melalui internet. Sedangkan XML memiliki lebih banyak data terstruktur dan pengguna dapat menggunakannya untuk menambahkan catatan.

Untuk apa JSON digunakan?

Fungsi JSON menghasilkan representasi JavaScript Object Notation (JSON) dari struktur data sebagai teks sehingga cocok untuk disimpan atau ditransmisikan ke seluruh jaringan . ECMA-404 dan IETF RFC 8259 menjelaskan format tersebut, yang banyak digunakan oleh JavaScript dan bahasa pemrograman lainnya.