Question

Here is what I am trying to do. I am on a category page in wordpress (this category is actually a bunch of food items) and I am trying to implement a nutrition calculator for the posts. So as the loop progresses, it displays some of the information from custom fields and stores the rest in an array.

            <?php
        $nutrition_info = array();   //Master Multidimentional Array
        $posts = query_posts($query_string . '&orderby=title&order=asc&posts_per_page=-1');//show all posts in our the category sorted alphabetically
        if ( have_posts() ) : while ( have_posts() ) : the_post(); 
            $prodslug = basename(get_permalink());
            global $post;$thePostID = $post->ID;
            $posttitle = get_the_title();
            // what to render
            ?>
            <div id="<?php echo $prodslug ?>" class="gridprod">
                <a class="prodimg" href="<?php echo get_permalink() ?>">
                    <img src="<?php echo get('imagery_display_image'); ?>" height="200" width="210">
                </a>
                <div class="overlay">
                    <a class="prodname" href="<?php echo get_permalink() ?>"><?php the_title(); ?></a>
                    <a href="javascript:void(0)" class="add softserve-scooped <?php echo $thePostID ?>"> Add </a><br>
                    <a class="prodlink" href="<?php echo get_permalink() ?>">details ...</a>
                </div>
            </div>
            <?php $temp = array(
                title => $posttitle,
                slug => $prodslug,
                calories => get('nutritional_information_calories'),
                totalfat => get('nutritional_information_total_fat'),
                saturated => get('nutritional_information_saturated_fat'),
                trans => get('nutritional_information_trans_fat'),
                cholesterol => get('nutritional_information_cholesterol'),
                sodium => get('nutritional_information_sodium'),
                carbs => get('nutritional_information_total_carbs'),
                fiber => get('nutritional_information_fiber'),
                sugar => get('nutritional_information_sugar'),
                protien => get('nutritional_information_protien'),
                vitamina => get('nutritional_information_vitamin_a'),
                vitamind => get('nutritional_information_vitamin_d'),
                calcium => get('nutritional_information_calcium_')) ?>
                <?php array_push($nutrition_info, $temp); ?>
        <?php endwhile; 
        <?php endif; ?>

This part is working just fine. $nutrition_info is populated as a multidimensional array as intended. So now I need to make it so I can access this information on command with jquery (ie. when .add is clicked take all the associated values in the array and add them to a variable that displays in the calculator.

I have tried multiple methods and have had no luck so I am coming to you a defeated man in search of advice. any ideas… or if I have to come at it a different way… anything to get me there.

Thanks in advance

Answer 1

The problem is that you have your nutrition info stored in a multidimensional array in PHP, which is server-side, and you need to access it via jQuery, which is client-side. So the solution is to convert your nutrition info into a client-side Javascript array. Luckily PHP offers a quick way to do this — after your loop, use the json_encode method to convert your array:

<script type="text/javascript">
var nutrition_info = <?php echo json_encode($nutrition_info); ?>;
</script>

From within a jQuery event handler you should be able to access all your nutrition info.