Extract value from PHP JSON object into jQuery

Question

I'm dynamically generating a list of values in PHP which I've converted into json using json_encode as below:

<?php $posts = get_post_meta(get_the_id(), 'size_repeatable', false);
    $specials = array();
    foreach ( $posts as $post ) {
        $size_available = $post['size_available'];
        if(intval(get_the_title($size_available)) > 1) { $add_sq_ft = " sq ft room"; } else { $add_sq_ft = ""; }
        $size_special_offer = $post['size_special_offer'];
        $specials[] = array(get_the_title($size_available) . $add_sq_ft => $post['size_special_offer']);
    }
    $specials_simplified = array_reduce($specials, 'array_merge', array());
    $specials_json = json_encode($specials_simplified);
?>

Which produces this JSON:

{"15 sq ft room":"10% off your first month","25 sq ft room":"15% off your first 1 month","35 sq ft room":"20% off your first 1 month","50 sq ft room":"25% off your first 1 month","75 sq ft room":"50% off your first 2 month","100 sq ft room":"50% off your first 2 month","125 sq ft room":"50% off your first 2 month","150 sq ft room":"50% off your first 2 months","200 sq ft room":"50% off your first 2 month"}

I then have a standard HTML Select field which has 15 sq ft room, 25 sq ft room, 35 sq ft room, 50 sq ft room, 75 sq ft room etc as selectable Option items (you can only select one option at a time).

I've then got a .change jQuery function, which when changed should refer to the JSON values above eg:

<script type="text/javascript">
    jQuery(document).ready(function( $ ) {
        $('#input_2_11').change(function(event) {
            var current_selection = $('#input_2_11' + ' option:selected').html();
            var size_json = <?php echo $specials_json; ?>;
            $('#dynamic_offer').html(size_json);
        });
    });
</script>

Basically I need to compare the #input_2_11 label with the JSON object, to display the correct value (special offer).

For instance, if a user had selected "15 sq ft room" then it would display "10% off your first month" in the #dynamic_offer div.

But this is where I'm really struggling - firstly trying to compare the variables 'current_selection' with 'size_json' and then displaying the correct special offer associated with that size.

Answer 1

MAybe you can try this:

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
    $('#input_2_11').change(function(event) {
        var current_selection = $('#input_2_11' + ' option:selected').html();
        var size_json = <?php echo $specials_json; ?>[current_selection];
        $('#dynamic_offer').html(size_json);
    });
});

Answer 2

Have you used console.log() to inspect what current_selection contains and to verify the contents of size_json ?

I think current_selection won't be quite what you've expected; .html() will return the entire HTML inside the option whereas you likely want to try something like $('#input_2_11').val() to get the current value of the input.

Once you have the value in current_selection , you can do size_json[current_selection] to access the special offer, since the value in current_selection will be the key of the key-value pair you need from size_json .

<script type="text/javascript">
    var size_json = <?php echo $specials_json; ?>;
    jQuery(document).ready(function( $ ) {
        $('#input_2_11').change(function() {
            // If you need the option's value
            //var current_selection = $('#input_2_11').val();

            // If you just want the text of the option.
            var current_selection = $('#input_2_11 option:selected').html();

            $('#dynamic_offer').html(size_json[current_selection]);
        });
    });
</script>

Answer 3

Here is a fully working example. Use .html() of an option as a key inside json variable. To make your code work simply replace assignment to json with <?php echo $specials_json; ?>; <?php echo $specials_json; ?>; .

 jQuery(document).ready(function() { // For brevity var size_json = {"15 sq ft room":"10% off your first month","25 sq ft room":"15% off your first 1 month","35 sq ft room":"20% off your first 1 month","50 sq ft room":"25% off your first 1 month","75 sq ft room":"50% off your first 2 month","100 sq ft room":"50% off your first 2 month","125 sq ft room":"50% off your first 2 month","150 sq ft room":"50% off your first 2 months","200 sq ft room":"50% off your first 2 month"}; // You don't need this part. for (var key in size_json) { if (size_json.hasOwnProperty(key)) { $('#input_2_11').append($('<option/>').html(key)); } } function checkSelection() { var current_selection = $('#input_2_11 option:selected').html(); $('#dynamic_offer').html(size_json[current_selection]); // Note the [current_selection] } checkSelection(); $('#input_2_11').change(checkSelection); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="input_2_11"> </select> <div id="dynamic_offer"> </div>