Generate JS variable array through data-set from woocommerce HTML variation

Question

This is the part of a vanilla JS code =

var prices = [100, 536, 2368];

But the above is hardcoded. I want them through an HTML select drop down

Answer 1

    add_action( 'wp_footer', 'webtoffee_product_attr_filter' );

    function webtoffee_product_attr_filter() {
       if ( !is_product() ) {
          return;
       }
       ?>
          add_action('wp_footer', 'webtoffee_checkout_shipping_filter_it_states');

    function webtoffee_checkout_shipping_filter_it_states() {
        if (!is_product()) {
            return;
        }
        ?>

       <script>

        var x = document.getElementById("color");
        var prices = new Array();;
        var i;
        for (i = 0; i < x.length; i++) {
            if(x.options[i].getAttribute('data-custom')){
            prices.push(x.options[i].getAttribute('data-custom'));
        }else{
            prices.push("0");
        }
        };
        console.log(prices);
        </script>

    <?php
}

Try this