Search code examples
javascriptarraysjquery-select2

Transform JSON object array for using select2 option group more simple

I want to use select2 plugin with using templateResult and has option group in it, in the documentation it say we should following pattern array of object in order to make it work. I'm already make the pattern like should be given and the pattern result is like i want, but in order to transform into final result i'm took a lot of steps. How to make it more simple, so far in this code are fine but i feel to many step on it in order to transform into like what i want.

Note: x variable is result from database.

let x = [
    {id_cp: 1, nama: 'Bank BJB', jenis: 'TB', path_gambar: '/assets/images/partners/bjb.png'},
    {id_cp: 2, nama: 'Bank BJB Giro Payment', jenis: 'GI', path_gambar: '/assets/images/partners/bjb.png'},
    {id_cp: 3, nama: 'CR Kantor Pusat', jenis: 'TN', path_gambar: '/assets/images/partners/tunai.png'},
    {id_cp: 4, nama: 'Bank BSI', jenis: 'TB', path_gambar: '/assets/images/partners/bsi.png'},
    {id_cp: 5, nama: 'Bank BRI', jenis: 'TB', path_gambar: '/assets/images/partners/bri.png'},
    {id_cp: 6, nama: 'Dana', jenis: 'EW', path_gambar: '/assets/images/partners/dana.png'},
    {id_cp: 7, nama: 'GoPay', jenis: 'EW', path_gambar: '/assets/images/partners/gopay.png'},
    {id_cp: 8, nama: 'Bank BRI', jenis: 'QR', path_gambar: '/assets/images/partners/qris.png'}
];

function selectLabel(arr) {
    arr = arr.map(function (elments) {
        return {
            id: elments.id_cp,
            text: elments.nama,
            jenis: elments.jenis,
            path_gambar: elments.path_gambar
        };
    });

    const outputGrouped = Object.values(arr.reduce((accu, {jenis, ...rest}) => {
        if(!accu[jenis]) {
            accu[jenis] = {jenis, children: []};
        }
        accu[jenis].children.push(rest);
        return accu;
    }, {}));
    
    // console.log(outputGrouped);
    
    const transformed = outputGrouped.map(({ jenis, children }) => ({
        text: jenis,
        children: children
    }));
    // console.log(transformed);

    return transformed;
}

console.log(selectLabel(x));

So how to transform data from x variable more simple from that code with the same result, because i took 3 step of block code

Solution

  • You could do renaming in a direct step.

    let x = [
    {id_cp: 1, nama: 'Bank BJB', jenis: 'TB', path_gambar: '/assets/images/partners/bjb.png'},
    {id_cp: 2, nama: 'Bank BJB Giro Payment', jenis: 'GI', path_gambar: '/assets/images/partners/bjb.png'},
    {id_cp: 3, nama: 'CR Kantor Pusat', jenis: 'TN', path_gambar: '/assets/images/partners/tunai.png'},
    {id_cp: 4, nama: 'Bank BSI', jenis: 'TB', path_gambar: '/assets/images/partners/bsi.png'},
    {id_cp: 5, nama: 'Bank BRI', jenis: 'TB', path_gambar: '/assets/images/partners/bri.png'},
    {id_cp: 6, nama: 'Dana', jenis: 'EW', path_gambar: '/assets/images/partners/dana.png'},
    {id_cp: 7, nama: 'GoPay', jenis: 'EW', path_gambar: '/assets/images/partners/gopay.png'},
    {id_cp: 8, nama: 'Bank BRI', jenis: 'QR', path_gambar: '/assets/images/partners/qris.png'}
];

function selectLabel(array) {
    return Object.values(array.reduce((accu, { id_cp: id, jenis: text, nama, path_gambar }) => {
        (accu[text] ??= { text, children: [] }).children.push({ id, text: nama, path_gambar });
        return accu;
    }, {}));
}

console.log(selectLabel(x));
    .as-console-wrapper { max-height: 100% !important; top: 0; }