Membuat array multidimensional dengan javascript

Bismillaahirrohmaanirrohiim…

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

<?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:

const mobils = ["Avanza", "Xenia", "Xpander"];
//untuk akses array, pake cara ini
let mobil_toyota = mobils[0];

Bisa juga seperti ini:

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:

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.

{
    "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:

<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:

{
 "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:

$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:

<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.

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

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.