转换JSON对象数组,使用select2选项组更简单



我想使用select2插件使用templateResult,并在其中有选项组,在文档中它说我们应该遵循对象的模式数组,以使其工作。我已经做出了应该给出的图案,图案结果是我想要的,但为了转化为最终结果,我采取了很多步骤。如何使它更简单,到目前为止,在这段代码都很好,但我觉得很多步上它,以转换成喜欢我想要的。

注意:x变量是数据库的结果。

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));

那么如何从x变量转换数据更简单,从代码得到相同的结果,因为我用了3步的块代码

您可以直接重命名。

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; }

最新更新