Question

I’m bringing an array into jquery from php, on a wordpress website. It is a multidimensional array that looks like this after I convert into $jqueryArray (taken from console.log)

2 : Object { max=” 10″, min=” 500 “, number=” 2 “}

3 : Object { max=” 15″, min=” 750 “, number=” 3 “}

4 : Object { max=” 8″, min=” 400 “, number=” 4 “}

5 : Object { max=” 12″, min=” 700 “, number=” 5 “}

1 : Object { max=” 10″, min=” 500 “, number=”1 “}

The code is as follows:

 jQuery(function() {
    jQuery('.wpsc_select_variation').change(function(){

        var arrayFromPHP = <?php echo json_encode($alt_tables) ?>;
        var $jqueryArray = {};

            jQuery.each(arrayFromPHP, function (key, value) {
                $jqueryArray[key] = {};
                $jqueryArray[key] = value;
            });
        console.log($jqueryArray);

        // clears the div that we will type the Table Minimum order too
        jQuery('#table-details').empty();
        var $selectedName;

        // returns an integer, specific to the Table # selected
        $selectedName = jQuery(this).find(':selected').text().replace('Table ', '');

        console.log($jqueryArray.$selectedName);

        var $newDetails = 'Table minimum order: ';
        jQuery('#table-details').append( $newDetails );
    });

});

For some reason $jqueryArray.$selectedName is undefined. I can see that $jqueryArray has 5 keys, numbered 1 through 5, but even when i try console.log($jqueryArray.1); I get undefined. I can’t seem to figure out how to call the number from the array. Basically I want

$jqueryArray[$selectedName][min]
I’ve tried $jqueryArray[$selectedName] in the console.log and receive undefined as well

I added a jsfiddle http://jsfiddle.net/kzuyd/14/

I took the <?php echo json_encode($alt_tables) ?> and just added it as the variable, since php doesn’t work in jsfiddle. Hopefully it works the same..

Answer 1

Updated jsFiddle

jQuery(function() {
    var arrayFromPHP = '{"1 ":{"note":null,"max":" 10","min":" 500 ","number":"1 "}," 2 ":{"note":null,"max":" 10","min":" 500 ","number":" 2 "}," 3 ":{"note":null,"max":" 15","min":" 750 ","number":" 3 "}," 4 ":{"note":null,"max":" 8","min":" 400 ","number":" 4 "}," 5 ":{"note":null,"max":" 12","min":" 700 ","number":" 5 "}}';

    var $jqueryArray = {};

    // you must parse `arrayFromPHP`, it's not actually an array now
    // it's a JSON string
    jQuery.each(JSON.parse(arrayFromPHP), function(key, value) {

        // your keys have spaces at the end of them e.g. "1 "
        // trim them first
        $jqueryArray['Table' + key.trim()] = {};
        $jqueryArray['Table' + key.trim()] = value;
    });

    jQuery('.wpsc_select_variation').change(function() {

        jQuery('#table-details').empty();
        jQuery('#table-minimum').empty();
        var $selectedName;

        $selectedName = jQuery(this)
            .find("option:selected")
            .text()
            .replace(/\s/g, '');
            // to replace all spaces, use the regex shown

        var $newDetails = 'The selected name: ' + $selectedName + '';
        jQuery('#table-details').append($newDetails);

        // use obj["min"] to get the minimum
        var $tableMin = '<br /><br />The table minimum is: ' +
                        $jqueryArray[$selectedName]["min"] + '';
        jQuery('#table-minimum').append($tableMin);
    });

});​