Cara mengakses array json multidimensi dalam javascript

JavaScript Object Notation (JSON) adalah format pertukaran data berbasis teks yang ringan, bebas bahasa. JSON menentukan seperangkat aturan untuk merepresentasikan data terstruktur secara portabel. JSON mendukung empat tipe primitif (string, angka, nilai boolean, dan null) dan dua tipe terstruktur (objek dan array). Banyak bahasa pemrograman menggunakan JSON untuk bertukar data, termasuk JavaScript, Java, C++, C#, Go, PHP, Python, dan banyak lainnya

Contoh JSON

{
  "Id": 78912,
  "Customer": "Jason Sweet",
  "Quantity": 1,
  "Price": 18.00
}

Contoh Larik JSON

Array JSON datang dalam berbagai jenis. string, angka, boolean, objek, dan array multidimensi. Di bawah ini adalah contoh tipe array JSON dengan deskripsi mendetail

Array JSON dari String

Array string JSON hanya berisi elemen string, di mana setiap elemen dipisahkan oleh koma (,). Berikut ini adalah contoh array JSON yang menyimpan nilai string

Contoh Array String JSON

["Apple", "Cherry", "Strawberry", "Banana", "Grape"]

Array Bilangan JSON

Array angka JSON hanya berisi elemen numerik. Di bawah ini adalah contoh array JSON yang menyimpan nilai numerik

Contoh Array Bilangan JSON

[13, 25, 53, 78, 94]

Array JSON dari Boolean

Array JSON boolean hanya berisi boolean (benar atau salah). Berikut ini adalah contoh array boolean JSON

Contoh Array Boolean JSON

[true, true, false, false, true]

Array Objek JSON

Objek JSON mirip dengan objek JavaScript. Kita juga dapat membuat larik JSON yang berisi banyak objek, lalu kita dapat mengulangi larik ini atau menggunakan tanda kurung siku "[]" untuk mendapatkan objek yang diinginkan. Di bawah ini adalah contoh array objek JSON

Contoh Array Objek JSON

[
  {"name":"Leo", "rating":"[email protected]", "age":25},
  {"name":"Tim", "rating":"[email protected]", "age":23},
  {"name":"Alice", "rating":"[email protected]", "age":31},
  {"name":"Jack", "rating":"[email protected]", "age":27}
]

Array Bersarang JSON

Array JSON dapat berisi berbagai array sebagai elemen. Anda dapat menggunakan operator "[]" untuk mendapatkan array pada indeks apa pun dan menggunakan operator "[]" lagi untuk mendapatkan elemen dari array yang dipilih. Berikut ini adalah contoh pembuatan array JSON multidimensi

Contoh Array Bersarang JSON

[    
  ["a", "a", "a"],   
  ["b", "b", "b"],   
  ["c", "c", "c"]   
]

Susunan Campuran JSON

Array JSON campuran berisi berbagai jenis elemen. Di bawah ini adalah contoh array JSON yang menyimpan nilai campuran

Contoh Array Campuran JSON

["Apple", 1, true,  {"name":"Leo", "rating":"VIP"}]

Lihat juga

• Bagaimana cara saya memposting JSON ke server?
• Bagaimana cara mendapatkan JSON dari server?
• Bagaimana cara menambahkan komentar ke JSON?
• Bagaimana cara mengonversi larik JavaScript ke string JSON?

Hasilkan cuplikan kode untuk Java dan bahasa pemrograman lainnya

Konversikan permintaan JSON Array Anda ke PHP, JavaScript/AJAX, Curl/Bash, Python, Java, C#/. Cuplikan kode .NET menggunakan pembuat kode Java

Contoh dan artikel terkait Java JSON Array API

Bagaimana cara mengirim Payload JSON ke server? . dump() vs json. dumps() dengan Python?

Mungkin ada saatnya Anda merasa perlu membuat perulangan melalui larik objek JSON di JavaScript. Namun, Anda tidak perlu lagi khawatir tentang hal ini, karena dapat dilakukan dengan menggunakan array angka, string, atau objek. Ada banyak cara mengulang dalam JavaScript dan di sepanjang artikel ini kami akan membantu Anda memahaminya

Ada beberapa jenis cara untuk mengkategorikan loop dalam JavaScript. Ini penting untuk diketahui karena mereka memainkan peran penting dalam memahami konsep

Kategori Loop dalam JavaScript

Putaran 'Untuk'

For Loop didahulukan karena kesederhanaan dan kemudahan penggunaannya. Ini adalah jenis loop yang sangat ramah pengguna yang berjalan dengan metode menggunakan penghitung.  

Nilai pertama kali ditetapkan dengan kondisi yang sesuai, yang juga disebut 'menginisialisasi loop'. Selanjutnya, terminal atau nilai akhir ditentukan. For Loop membuatnya sangat mudah ketika Anda perlu menjalankan serangkaian kode beberapa kali

For Loop dibagi lagi menjadi. ‍

1. Menggunakan larik

Sepotong kode berikut adalah contoh sempurna tentang cara menggunakan loop for melalui array.  

{% bahasa pemblokir kode="js" %}
var angka = [ 10, 20, 30, 40, 50]
untuk (var i=0; i < angka. panjang;
menghibur. log(angka[i])
}
‍{% kode-blok-akhir %}
Di sini, saya telah menggunakan semua angka dalam bentuk array, lalu mencetaknya masing-masing di jendela konsol. Dengan cara yang sama, Anda dapat membuat perulangan melalui serangkaian string

2. Membuat loop melalui elemen DOM

Loop For juga dapat digunakan untuk mengubah warna. Pertimbangkan situasi di mana Anda ingin memilih warna tertentu untuk semua jangkar halaman Anda. Untuk melakukannya, gunakan potongan kode berikut
{% bahasa pemblokir kode="js" %}
elemen var = dokumen. querySelectorAll("a");
untuk (var i=0; ielemen[i]. gaya. warna = "merah";
}
‍{% kode-blok-akhir %}

Ketika Anda melihat kode di atas, hal-hal mungkin tampak tidak terlalu jelas.  

Saya pertama kali menggunakan `document. querySelectorAll("a")` untuk mendapatkan semua jangkar saya dalam format array. Setelah selesai, langkah selanjutnya memutar semua array dan mengubah warnanya.  

Di sini, kami menggunakan warna merah, tetapi Anda dapat memilih warna apa pun dalam kode dan jangkar halaman Anda akan muncul dengan warna tertentu.  

Untuk lebih memahami ini secara visual, inilah keluaran saat saya menjalankan kode ini di situs W3Schools

Anda dapat melihat bahwa warna jangkar telah berubah menjadi merah.  

Putaran 'Untuk Masuk'

Cara lain untuk mengulang adalah For In Loop. Berbeda dengan For Loop, loop ini tidak akan menggunakan counter. Jadi ini membuat keseluruhan proses menjadi lebih sederhana dan tidak merepotkan. Faktanya, For In Loop pada dasarnya adalah versi sederhana dari For Loop

Berikut ini adalah berbagai cara perulangan menggunakan teknik For In

1. Perulangan melalui Properti Objek

Ini contohnya; . Inilah cara Anda menggunakan For In Loop untuk melakukannya
{% bahasa pemblokir kode="js" %}
var orang = {
fname. "Nick",
nama. "Jonas",
usia. 26
};
untuk (biarkan x secara pribadi) {
menghibur. log(x + ". "+ orang[x])
}
‍{% kode-blok-akhir %}

Perulangan Menggunakan JSON

JSON adalah singkatan dari Notasi Objek JavaScript. Ini adalah format ringan untuk menyimpan dan mentransfer data dari satu tempat ke tempat lain. Jadi dalam perulangan, itu adalah salah satu teknik yang paling umum digunakan untuk mengangkut data yang merupakan format array atau dalam nilai atribut.  

Inilah contoh yang menunjukkan konsep di atas

{% bahasa pemblokir kode="js" %}
jsonData ={
satu. [11, 12, 13, 14, 15],
dua. [21, 22, 23],
tiga. [31, 32]
}
‍{% kode-blok-akhir %}
Notasi Objek JavaScript juga terdiri dari root, yaitu jsonData. Lebih lanjut berisi tiga node yang disebut, "satu", "dua", dan "tiga".  

Inilah cara Anda dapat menarik informasi dari JSON

{% bahasa pemblokir kode="js" %}
var json = {
satu. [11, 12, 13, 14, 15],
dua. [21, 22, 23],
tiga. [31, 32]
}
};
untuk (kunci var di json. jsonData) {
untuk (var key1 di json. jsonData[kunci]) {
menghibur. log(json. jsonData[kunci][kunci1])
}
}
‍{% kode-blok-akhir %}
Di atas, saya menggunakan dua For In Loops untuk memanfaatkan JSON dan mengekstrak informasi darinya. Salah satu loop itu adalah loop luar yang berjalan tiga kali. Jika Anda bertanya-tanya mengapa perlu dijalankan tiga kali, itu karena harus mencakup node yang disebutkan di atas

Loop kedua adalah loop dalam yang dimaksudkan untuk mencakup semua nilai internal. Nilai-nilai internal ini adalah nilai-nilai yang berada di dalam tiga node. Setelah Anda menjalankan kode, Anda akan mendapatkan hasil seperti ini

JSON Dijelaskan

Jika kita melangkah lebih jauh, ada beberapa hal lagi yang perlu Anda ketahui tentang JSON. Kode yang baru saja kita jalankan juga dapat diekspresikan dengan menyertakan '[]' untuk menampung tiga node di atas

Begini caranya

{% bahasa pemblokir kode="js" %}
jsonData. [
satu. [11, 12, 13, 14, 15],
dua. [21, 22, 23],
tiga. [31, 32]
]
‍{% kode-blok-akhir %}
Kemudian, pada potongan kode berikut, gabungan dari dua teknik perulangan For dan For In digunakan untuk menarik semua informasi dari JSON

{% bahasa pemblokir kode="js" %}
var json = {
jsonData. [
{satu. [11, 12, 13, 14, 15]},
{dua. [21, 22, 23]},
{tiga. [31, 32]}
]
};
untuk (var i=0; iuntuk (kunci var di json. jsonData[i]) {
untuk (var j= 0; jmenghibur. log(json. jsonData[i][kunci][j])
}
}
}
‍{% kode-blok-akhir %}

Jenis-Jenis Loop dan Kegunaannya

Sekarang mari kita lihat berbagai jenis Loops dan kegunaannya. Kita akan membahas “While” Loop, “Do While Loop” dan “The ForEach() Loop”. ‍

1. Putaran "Sementara".

While Loop juga tidak memiliki penghitung dan hanya berjalan jika kondisi yang ditentukan benar. Berikut adalah contoh yang mendemonstrasikan while loop di mana loop berjalan hingga tak terhingga

{% bahasa pemblokir kode="js" %}
var infiniteValue = true;
while (nilai tak terbatas) {
menghibur. log("Tak Terbatas")
}
‍{% kode-blok-akhir %}

2. Lakukan While Loop

Di loop ini, ada kondisi yang ditentukan yang perlu diperiksa di akhir proses

Inilah cara Anda dapat menggunakan Do While Loop untuk mengulang melalui XML (Extensible Markup Language)

3. Lingkaran ForEach()

Metode ini digunakan untuk mengulang melalui elemen array. Ini contohnya

{% bahasa pemblokir kode="js" %}
var nama = ["jeri", "tom", "pluto", "micky", "mini"];
nama. untukSetiap(fungsi1);
function function1(currentValue, index) {
menghibur. log("Indeks dalam array adalah. "+indeks +". Nilai adalah. "+nilai sekarang);
}
‍{% kode-blok-akhir %}

Perulangan melalui JSON lebih detail dengan contoh

Contoh 1

Kami membuat daftar buku dan kami memasukkan judul sebagai "Lord of the Rings" dan tahun sebagai "1994" dan jumlah halaman sebagai "3000". Demikian pula, sejumlah besar objek dapat dibuat dan setelah selesai, kita akan memiliki database yang besar

{% bahasa pemblokir kode="js" %}
var buku = [
{
judul. "Lord of the Rings",
tahun. 1994,
halaman. 3000
},
{
judul. "1984",
tahun. 1984,
halaman. 2000
},
{
judul. "Seni dari perang",
tahun. 2000,
halaman. 5000
}
]
‍{% kode-blok-akhir %}
Sekarang hal yang berbeda dapat dilakukan dengan database ini

Misalnya;

{% bahasa pemblokir kode="js" %}
waspada (buku. panjang);
‍{% kode-blok-akhir %}
Saat kita menjalankan ini, browser akan menampilkan tiga. Intinya, dengan ini, kami memeriksa bahwa ada tiga objek dalam larik ini

Perlu diingat bahwa di JSON, Anda perlu memisahkan objek Anda dengan koma seperti yang Anda lihat pada contoh

Contoh 2

Dalam contoh ini, kami mengulang di dalam array

{% bahasa pemblokir kode="js" %}
untuk (i=0; idokumen. menulis(
       books.title + "
"
);
}
‍{% kode-blok-akhir %}

Sekali, saya menjalankan ini, semua judul di database saya akan ditampilkan seperti yang ditunjukkan di bawah ini

Sekarang, itu akan membantu Anda lebih memahami cara mengulang melalui JSON. Saya juga membuat panduan video dari beberapa contoh secara real-time untuk membantu Anda lebih memahami konsep ini

‍

Kesimpulan

Artikel dan tutorial video ini seharusnya membantu Anda memahami konsep perulangan melalui array objek JSON dalam JavaScript. Sekarang Anda harus dapat menerapkan tutorial ini untuk melakukan hal-hal seperti menjalankan For Loop, For In Loop, While Loop, dan seterusnya

Selamat Coding

Untuk mempelajari lebih lanjut tentang Microverse, dan bergabung dengan komunitas pengembang perangkat lunak jarak jauh kami yang mendukung, mulailah di bawah ini

Siap menjadi pengembang perangkat lunak dan bekerja dari jarak jauh untuk perusahaan global?

DAFTAR SEKARANGPELAJARI LEBIH LANJUTPELAJARI LEBIH LANJUT

Berlangganan Buletin Perusahaan kami untuk mendapatkan kiat manajemen tim jarak jauh ke kotak masuk Anda

Terima kasih
Langganan Anda ke daftar kami telah dikonfirmasi

Ups. Terjadi kesalahan saat mengirimkan formulir

Umair Arshad

Umair Arshad banyak berkontribusi pada industri perangkat lunak. Dia adalah orang yang penasaran dan Anda dapat menghubunginya melalui logo Twitter di bawah ini

Bagaimana cara mengakses array multidimensi di js?

Bagaimana cara mengakses array JSON dalam JavaScript?

Bagaimana cara mendapatkan indeks array multidimensi dalam JavaScript?

Bagaimana cara menambahkan array multidimensi dalam JavaScript?