Configurable product using javascript / jquery

Question

Configurable Product

Hi,

I'm trying to generate configurable products for the selected attributes using JavaScript. I want to generate 3.0_Aluminium_1219, 3.0_Amber_1219, 3.8_Aluminium_1219 and 3.8_Amber_1219.

I have used the following script to store the option value in array

$('.complexSel').on('select2:select', function (e) {

        var obj = {}
        var keysArray = new Array();
        var price = $('.complexSel').find(':selected');
        $.each(price, function(index){
            keysArray.push($(this).attr('data-mst-id'));
            if($(this).attr('data-mst-id') in obj ) {
                obj[$(this).attr('data-mst-id')].push({id:$(this).val(),text:$(this).text()});
            }else{
                obj[$(this).attr('data-mst-id')] = new Array();
                obj[$(this).attr('data-mst-id')].push({id:$(this).val(),text:$(this).text()});
            }
        });
        var unique = keysArray.filter(function(itm, i, keysArray) {
            return i == keysArray.indexOf(itm);
        });
        console.log(obj);
        
    });

Please help me to achieve the result

Answer 1

used the following function to solve this issue.

$('.complexSel').on('change', function (e) {
            var obj = {}
            //var obj = new Array();
            var price = $('.complexSel').find(':selected');
            $.each(price, function(index){
                if($(this).attr('data-mst-val') in obj ) {
                    obj[$(this).attr('data-mst-val')].push($(this).text());
                }else{
                    obj[$(this).attr('data-mst-val')] = new Array();
                    obj[$(this).attr('data-mst-val')].push($(this).text());
                }
            });

            var cartesianRes = getCartesian(obj);
            console.log(cartesianRes);
            
            /* OUTPUT AS FOLLOWS*/
            /*
            [
                {
                    "Size": "3.0",
                    "Color": "Aluminum"
                },
                {
                    "Size": "3.0",
                    "Color": "Amber"
                },
                {
                    "Size": "3.8",
                    "Color": "Aluminum"
                },
                {
                    "Size": "3.8",
                    "Color": "Amber"
                }
            ]
            
            */
        });
        function getCartesian(object) {
            return Object.entries(object).reduce((r, [k, v]) => {
                var temp = [];
                r.forEach(s =>
                    (Array.isArray(v) ? v : [v]).forEach(w =>
                        (w && typeof w === 'object' ? getCartesian(w) : [w]).forEach(x =>
                            temp.push(Object.assign({}, s, { [k]: x }))
                        )
                    )
                );
                return temp;
            }, [{}]);
        }