PHP array to jQuery array " Uncaught SyntaxError: Unexpected token < "

Question

I am trying to pass my php array to jQuery array but I am having this error on chrome console Uncaught SyntaxError: Unexpected token <

functions.php

/*Call Jquery for dropdowns*/
function mytheme_custom_scripts(){
    if ( is_page('Support')) {
            $scriptSrc = get_stylesheet_directory_uri() . '/js/freshdeskdata.js';
            wp_enqueue_script( 'myhandle', $scriptSrc , array(), '1.0',  false );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );
/*End - Jquery*/    

add_filter('wpcf7_form_tag_data_option', function($n, $options, $args){

        ...

        // Category
        if (in_array('category.provider', $options)){

            ...      

            // Getting results
            $result = curl_exec($ch); // Getting jSON result string

            curl_close($ch);

            $data = json_decode($result, true);
            global $choice; // This is my array
            $choice = $data[0]['choices'];
            ksort($choice);

        return array_keys($choice);
        }

        // default - do not apply any changes within the options
        return null;
    }, 10, 3);

/js/freshdeskdata.js

jQuery(function ($) { 
  $(document).ready(function() {  
    $("#main-category").on('change', function() {
     var arrayFromPHP = <?php echo json_encode($choice); ?>;
     var $el = $("#sub-category");
     $el.empty();
     alert("arrayFromPHP");
    });
  });
});

Answer 1

To change choices depending on what an user selected in another input/select, you need to use the WP AJAX API.

In your functions.php, use wp_localize_script() to get AJAX url available on front-end and define an AJAX action callback

function mytheme_custom_scripts() {
    if ( is_page('Support') ) {
        $scriptSrc = get_stylesheet_directory_uri() . '/js/freshdeskdata.js';
        wp_enqueue_script( 'myhandle', $scriptSrc , array(), '1.0',  false );
        wp_localize_script( 'myhandle', 'mydata', array( 'ajaxurl' => admin_url('admin-ajax.php') ) );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );

function get_choices() {
    $main_category = $_POST['main_category'];
    $choices = []; // todo: get choices here
    wp_send_json_success($choices); // send data with success code and die
}
add_action('wp_ajax_get_choices', 'get_choices'); //back-end
add_action('wp_ajax_nopriv_get_choices', 'get_choices'); //front-end

Then in your script make an AJAX call to get the choices

jQuery(function ($) {
    $(document).ready(function() {  
        $("#main-category").on('change', function() {
            $.post(mydata.ajaxurl, { // mydata has been created by the wp_localize_script function
                action: 'get_choices',
                main_category: $("#main-category").val()
            }, function (response) {
                console.log(response)
                // todo: display new choices
            })
        });
    });
});