Populate an array from the loop, and then read the array into JS

Question

On my site I've got a custom post type. Each custom post has a thumbnail of a person, and an extra custom field that has another image in it. I've written code so that when the user hovers over the thumbnail of the person, they can see the alternative thumbnail. This is in JS.

Everything is mechanically working fine, (I got wp_enqueue_script and wp_localize_script going with some help from here!) but instead of each persons thumbnail seeing the correct corresponding alternative thumbnail on hover, they were all seeing the same one. This was the last one that was read into the array (they were all being overwritten in the loop.)

My new approach (which I don't know if its right) is to read the post ID into the first half of the array, and then the corresponding thumbnail into the second half.

This all seems to work when I echo it in PHP, but I'm not sure how to get it into Javascript.

Assuming the postID is 23, I've tried just writing alert(MyScriptParams.23); but that doesn't work.

I can't quite get my head around the scope, what would I do if there was 100 people? I assume I'd write a separate loop in JS to loop through it all? I'm having difficulty with the link between PHP and JS...

Any help greatly appreciated! I may be doing something stupid!

page-custom.php

<?php 
                $args = array( 'post_type' => 'drummers', 'orderby' => 'menu_order');  

                $your_loop = new WP_Query( $args ); 

                //FETCHES THE POSTS
                if ( $your_loop->have_posts() ) : while ( $your_loop->have_posts() ) : 
                $your_loop->the_post(); 

                //GETS THE POST ID FROM WP_QUERY

                $gettheid = get_the_ID();                

                    if ( has_post_thumbnail() ) {
                    the_post_thumbnail('', array( 'class' => "img-fluid animated drummers_face$post_id"));
                    } 

                    $meta = get_post_meta( $post->ID, 'drummers_fields', true );

                    $thumbnail_url = get_the_post_thumbnail_url($post->ID);


                    wp_localize_script('animated', 'MyScriptParams', 
                        $array = array(
                        $gettheid => $meta['image']
                        //'bar' => $thumbnail_url

                        ));

                //THIS ECHOS FINE
                echo $array[$gettheid];

                ?>

            <?php the_title(); ?>



            <?php the_content(); ?>



        </div><!-- END OF COLUMN-->    

<?php endwhile; endif; wp_reset_postdata(); ?>

Javascript - I've got some code to show the new thumbnail on hover, but I'm keeping it basic and trying to get it to just alert first

alert(MyScriptParams.23);

Update

Have moved localize_script outside of the loop, added in a counter that counts through the array, but still have the same problem.

            <?php


                $args = array( 'post_type' => 'drummers', 'orderby' => 'menu_order');  

                $counter = 0;

                $bigid = array();

                $your_loop = new WP_Query( $args ); 

                if ( $your_loop->have_posts() ) : while ( $your_loop->have_posts() ) : 
                $your_loop->the_post(); 


                array_push( $bigid, get_the_ID() );
            ?>

        <div class="col-md-4">

            <?php                

                if ( has_post_thumbnail() ) {
                the_post_thumbnail('', array( 'class' => "img-fluid animated drummers_face$post_id"));
                } 

                $meta = get_post_meta( $post->ID, 'drummers_fields', true );

                $thumbnail_url = get_the_post_thumbnail_url($post->ID);


             $array = array(
                    $bigid[$counter] => $meta['image']
                    //'bar' => $thumbnail_url

                    );            

            echo $bigid[$counter];

            $counter++;

            ?>


            <?php the_title(); ?>


            <?php the_content(); ?>


        </div><!-- END OF COLUMN-->    


<?php endwhile; endif; wp_reset_postdata(); ?>


    <?php    wp_localize_script('animated', 'MyScriptParams', $array);  ?>  

Answer 1

It's because you're running the localize script inside the loop. Instead, store the array of ids etc, and then run localize script outside/after you set it up.

All the localize script really does is inject the params you pass into it into the global scope of js/jquery, allowing you to reference them. However, localize script isn't cumulative, instead you're just re-writing it over and over (thus only ever seeing the last id of the loop, and all other ids being undefined).

Taking another look, I see another issue:

$array = array(
                    $bigid[$counter] => $meta['image']
                    //'bar' => $thumbnail_url

                    );     

Should be

$array[] = array(
                    $bigid[$counter] => $meta['image']
                    //'bar' => $thumbnail_url

                    );         

With the difference being that in the former, you are resetting $array over and over, vs the latter being you're actually pushing the data into an array.

You'll also want to make sure that prior to the loop, before iteration, to define $array = array(). It will still work, but if you don't define it first you'll get php warnings.

As a third option you could also do:

$array[$bigid[$counter]] = $meta['image']; 

Since you seem new, I'd actually try doing both and doing a dump/console log to see the difference in data structure it creates.