Membuat array multidimensional dengan javascript

Bismillaahirrohmaanirrohiim…

Membuat array multidimensi menggunakan PHP adalah cara yang sangat mudah, dimana variabelnya dapat dinyatakan langsung, seperti:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
$arr_multi = array();
$arr_multi['satu'] = array('produk_id'=>'1','produk_nama'=>'Sabun','harga'=>5000);
$arr_multi['dua'] = array('produk_id'=>'2','produk_nama'=>'Sampo','harga'=>7000);
//dst
<?php $arr_multi = array(); $arr_multi['satu'] = array('produk_id'=>'1','produk_nama'=>'Sabun','harga'=>5000); $arr_multi['dua'] = array('produk_id'=>'2','produk_nama'=>'Sampo','harga'=>7000); //dst
<?php
$arr_multi = array();
$arr_multi['satu'] = array('produk_id'=>'1','produk_nama'=>'Sabun','harga'=>5000);
$arr_multi['dua'] = array('produk_id'=>'2','produk_nama'=>'Sampo','harga'=>7000);
//dst

Nah, masalahnya dalam javascript tidak semudah itu ferguso…

Umumnya pendefinisian array di javascript bisa seperti berikut:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const mobils = ["Avanza", "Xenia", "Xpander"];
//untuk akses array, pake cara ini
let mobil_toyota = mobils[0];
const mobils = ["Avanza", "Xenia", "Xpander"]; //untuk akses array, pake cara ini let mobil_toyota = mobils[0];
const mobils = ["Avanza", "Xenia", "Xpander"];
//untuk akses array, pake cara ini
let mobil_toyota = mobils[0];

Bisa juga seperti ini:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const mobils = [];
mobils[0]= "Avanza";
mobils[1]= "Xenia";
mobils[2]= "Xpander";
const mobils = []; mobils[0]= "Avanza"; mobils[1]= "Xenia"; mobils[2]= "Xpander";
const mobils = [];
mobils[0]= "Avanza";
mobils[1]= "Xenia";
mobils[2]= "Xpander";

Array Key pada javascript berupa index angka, tidak bisa diisi string, misalnya mobils[‘toyota’] = ‘Avanza’;. Aturannya Key javascript harus berupa index angka, namun array valuenya bisa berupa apa saja, bisa number, string, array, object, dll, misal:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
arrayobj[0] = Date.now;
arrayobj[1] = fungsijs;
arrayobj[2] = mobils;
arrayobj[0] = Date.now; arrayobj[1] = fungsijs; arrayobj[2] = mobils;
arrayobj[0] = Date.now;
arrayobj[1] = fungsijs;
arrayobj[2] = mobils;

Untuk membuat multidimensional array di javascript tidak bisa dengan cara biasa, namun bisa menggunakan salah satu fitur yang umum dipakai, yaitu: json.

Ya, jadikan array multidimensi menjadi format JSON. Kemudian akses dengan javascript.

Baca Juga:   Kode datatable yang berguna
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"name": "Andre",
"age": 32,
"address": {
"streetAddress": "Jl Gajayana",
"city": "Malang"
},
"phoneNumber": [
{
"type": "home",
"number": "0341-123123123"
},
{
"type": "mobile",
"number": "08123123123"
}
]
}
{ "name": "Andre", "age": 32, "address": { "streetAddress": "Jl Gajayana", "city": "Malang" }, "phoneNumber": [ { "type": "home", "number": "0341-123123123" }, { "type": "mobile", "number": "08123123123" } ] }
{
    "name": "Andre",
    "age": 32,
    "address": {
        "streetAddress": "Jl Gajayana",
        "city": "Malang"
    },
    "phoneNumber": [
        {
            "type": "home",
            "number": "0341-123123123"
        },
        {
            "type": "mobile",
            "number": "08123123123"
        }
    ]
}

Untuk mengaksesnya, seperti di bawah ini:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script type="text/javascript">
var data = '{"name": "Andre","age": 32,"address": {"streetAddress": "Jl Gajayana","city": "Malang"},"phoneNumber": [{"type": "home","number": "0341-123123123"},{"type": "mobile","number": "08123123123"}]}';
var json = JSON.parse(data);
alert(json["name"]); //Andre
alert(json.name); //Andre
alert(json.address.streetAddress); //Jl Gajayana
alert(json["address"].city); //Malang
alert(json.phoneNumber[0].number); //"0341-123123123
alert(json.phoneNumber[1].type); //mobile
alert(json.phoneNumber.number); //undefined
</script>
<script type="text/javascript"> var data = '{"name": "Andre","age": 32,"address": {"streetAddress": "Jl Gajayana","city": "Malang"},"phoneNumber": [{"type": "home","number": "0341-123123123"},{"type": "mobile","number": "08123123123"}]}'; var json = JSON.parse(data); alert(json["name"]); //Andre alert(json.name); //Andre alert(json.address.streetAddress); //Jl Gajayana alert(json["address"].city); //Malang alert(json.phoneNumber[0].number); //"0341-123123123 alert(json.phoneNumber[1].type); //mobile alert(json.phoneNumber.number); //undefined </script>
<script type="text/javascript">
       var data = '{"name": "Andre","age": 32,"address": {"streetAddress": "Jl Gajayana","city": "Malang"},"phoneNumber": [{"type": "home","number": "0341-123123123"},{"type": "mobile","number": "08123123123"}]}';

	var json = JSON.parse(data);
			
	alert(json["name"]); //Andre
	alert(json.name); //Andre
	
	alert(json.address.streetAddress); //Jl Gajayana
	alert(json["address"].city); //Malang
			
	alert(json.phoneNumber[0].number); //"0341-123123123
	alert(json.phoneNumber[1].type); //mobile
			
	alert(json.phoneNumber.number); //undefined
</script>

Contoh lain, misalnya json dari database yang bisa dibuat dengan PHP:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"1111111111": {
"produk_id": "1111111111",
"produk_nama": "Galon Isi Ulang - 2500",
"harga": 2500,
"status": 1,
"masuk_tanggal": "2022-07-26 13:21:38",
"masuk_oleh": "1",
"edit_oleh": "1111111111111111111111111",
"edit_tanggal": "2022-07-27 11:41:48"
},
"222222": {
"produk_id": "222222",
"produk_nama": "Galon Isi Ulang - 3000",
"harga": 3000,
"status": 1,
"masuk_tanggal": "2022-07-26 14:10:45",
"masuk_oleh": "1",
"edit_oleh": null,
"edit_tanggal": null
}
}
{ "1111111111": { "produk_id": "1111111111", "produk_nama": "Galon Isi Ulang - 2500", "harga": 2500, "status": 1, "masuk_tanggal": "2022-07-26 13:21:38", "masuk_oleh": "1", "edit_oleh": "1111111111111111111111111", "edit_tanggal": "2022-07-27 11:41:48" }, "222222": { "produk_id": "222222", "produk_nama": "Galon Isi Ulang - 3000", "harga": 3000, "status": 1, "masuk_tanggal": "2022-07-26 14:10:45", "masuk_oleh": "1", "edit_oleh": null, "edit_tanggal": null } }
{
	"1111111111": {
		"produk_id": "1111111111",
		"produk_nama": "Galon Isi Ulang - 2500",
		"harga": 2500,
		"status": 1,
		"masuk_tanggal": "2022-07-26 13:21:38",
		"masuk_oleh": "1",
		"edit_oleh": "1111111111111111111111111",
		"edit_tanggal": "2022-07-27 11:41:48"
	},
	"222222": {
		"produk_id": "222222",
		"produk_nama": "Galon Isi Ulang - 3000",
		"harga": 3000,
		"status": 1,
		"masuk_tanggal": "2022-07-26 14:10:45",
		"masuk_oleh": "1",
		"edit_oleh": null,
		"edit_tanggal": null
	}
}

Cara buatnya di PHP:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$produks = $db->query('select * from t_produk where status=1 order by produk_nama');
$pids = array();
foreach ($produks as $arr) {
$pids[$arr['produk_id']] = $arr;
}
$js_embed = 'var pids = \''.str_replace("'", "\'", json_encode($pids)).'\'; ';
//Tanda petik perlu direplace menjadi \' agar tidak terjadi error karena petik satu digunakan untuk buka tutup variabel.
$produks = $db->query('select * from t_produk where status=1 order by produk_nama'); $pids = array(); foreach ($produks as $arr) { $pids[$arr['produk_id']] = $arr; } $js_embed = 'var pids = \''.str_replace("'", "\'", json_encode($pids)).'\'; '; //Tanda petik perlu direplace menjadi \' agar tidak terjadi error karena petik satu digunakan untuk buka tutup variabel.
$produks = $db->query('select * from t_produk where status=1 order by produk_nama');

$pids = array();
foreach ($produks as $arr) {
    $pids[$arr['produk_id']] = $arr;
}
$js_embed = 'var pids = \''.str_replace("'", "\'", json_encode($pids)).'\'; ';
//Tanda petik perlu direplace menjadi \' agar tidak terjadi error karena petik satu digunakan untuk buka tutup variabel. 

Jadinya javascript dan implementasinya untuk akses array multidimensi, adalah sebagai berikut:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script type="text/javascript">
var pids = '{"1111111111":{"produk_id":"1111111111","produk_nama":"Galon Isi Ulang - 2500","harga":2500,"status":1,"masuk_tanggal":"2022-07-26 13:21:38","masuk_oleh":"1","edit_oleh":"1111111111111111111111111","edit_tanggal":"2022-07-27 11:41:48"},"222222":{"produk_id":"222222","produk_nama":"Galon Isi Ulang - 3000","harga":3000,"status":1,"masuk_tanggal":"2022-07-26 14:10:45","masuk_oleh":"1","edit_oleh":null,"edit_tanggal":null}}';
$(document).ready(function() {
$("#produk_id").change(function() {
var produk_id = $(this).val();
if (produk_id=="" || produk_id==0 || produk_id=="0") {
//reset
//resetForm();
return;
}
var json = JSON.parse(pids);
// alert(json[produk_id].produk_nama);
var hargax = json[produk_id].harga;
$("#harga").val(hargax);
var totalx = hargax * $("#jumlah").val();
$("#total").val(totalx);
});
});
</script>
<script type="text/javascript"> var pids = '{"1111111111":{"produk_id":"1111111111","produk_nama":"Galon Isi Ulang - 2500","harga":2500,"status":1,"masuk_tanggal":"2022-07-26 13:21:38","masuk_oleh":"1","edit_oleh":"1111111111111111111111111","edit_tanggal":"2022-07-27 11:41:48"},"222222":{"produk_id":"222222","produk_nama":"Galon Isi Ulang - 3000","harga":3000,"status":1,"masuk_tanggal":"2022-07-26 14:10:45","masuk_oleh":"1","edit_oleh":null,"edit_tanggal":null}}'; $(document).ready(function() { $("#produk_id").change(function() { var produk_id = $(this).val(); if (produk_id=="" || produk_id==0 || produk_id=="0") { //reset //resetForm(); return; } var json = JSON.parse(pids); // alert(json[produk_id].produk_nama); var hargax = json[produk_id].harga; $("#harga").val(hargax); var totalx = hargax * $("#jumlah").val(); $("#total").val(totalx); }); }); </script>
<script type="text/javascript">
    
    var pids = '{"1111111111":{"produk_id":"1111111111","produk_nama":"Galon Isi Ulang - 2500","harga":2500,"status":1,"masuk_tanggal":"2022-07-26 13:21:38","masuk_oleh":"1","edit_oleh":"1111111111111111111111111","edit_tanggal":"2022-07-27 11:41:48"},"222222":{"produk_id":"222222","produk_nama":"Galon Isi Ulang - 3000","harga":3000,"status":1,"masuk_tanggal":"2022-07-26 14:10:45","masuk_oleh":"1","edit_oleh":null,"edit_tanggal":null}}'; 
    
    $(document).ready(function() {
        $("#produk_id").change(function() {
            var produk_id = $(this).val();
            if (produk_id=="" || produk_id==0 || produk_id=="0") {
                //reset
                //resetForm();
                return;
            }
            var json = JSON.parse(pids);
            // alert(json[produk_id].produk_nama);
        
            var hargax = json[produk_id].harga;
            $("#harga").val(hargax);
        
            var totalx = hargax * $("#jumlah").val();
            $("#total").val(totalx);
        
        });
    });
</script>

Akses data JSON berdasarkan produk_id jadi sangat mudah.

Baca Juga:   HTML dan Javascript ternyata hubungannya mudah dipahami (part 5)

Tambahan info, berikut cara loop iterasi array key value dari json di javascript:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var jsonx = '{"data1":1,"data2":1,"data3":1,"data4":1,"data5":1,"data6":1}';
try {
var arr = $.parseJSON(jsonx);
for(var k in arr) {
$("#debug").append(k+" = "+arr[k]);
//k adalah key, dalam hal ini bernilai data1, data2, dst, sedang arr[k] adalah nilainya
}
} catch (s) {
alert(e);
}
var jsonx = '{"data1":1,"data2":1,"data3":1,"data4":1,"data5":1,"data6":1}'; try { var arr = $.parseJSON(jsonx); for(var k in arr) { $("#debug").append(k+" = "+arr[k]); //k adalah key, dalam hal ini bernilai data1, data2, dst, sedang arr[k] adalah nilainya } } catch (s) { alert(e); }
var jsonx = '{"data1":1,"data2":1,"data3":1,"data4":1,"data5":1,"data6":1}';

                try {                    
                    var arr = $.parseJSON(jsonx);

                    for(var k in arr) {
                        $("#debug").append(k+" = "+arr[k]);
                        //k adalah key, dalam hal ini bernilai data1, data2, dst, sedang arr[k] adalah nilainya
                    }
                } catch (s) {
                    alert(e);
                }

Demikian semoga bermanfaat.

Bagikan

You May Also Like

About the Author: rasupe

Leave a Reply

Discover more from Rasupe

Subscribe now to keep reading and get access to the full archive.

Continue reading