ACF repeater in a Javascript array

[Ellie]

I’m working on a “Team Page”.

There are 6 people that need to be there with their:

1. Full name
2. Position
3. Bio
4. Picture

The page basically looks like this.

The image is clickable and when clicked, a modal would pop up that would display the picture, full name, position and bio of the person clicked.

To avoid code duplication, I stored the data in arrays.

I don’t have a problem in getting the data from the array and displaying it but they want me to make it an ACF in Wordpress so they can freely add another person or other data whenever they want.

I made a nested repeater in WordPress. It shows in the Developer Tools that the sub-fields were being included in the JavaScript but they wouldn’t display in the modal.

(The Bio shows as well. Just cropped it out of the image.)

What seems to be the problem here? It works when I directly initialize the values in the array but the modal displays nothing when I use ACF.

Any idea would help. Thank you.

Here’s what my Javascript looks like.

<script>
        $(document).ready(function() {
            $('.btn').on('click', function () {
                var name = new Array(
                
                <?php if(get_field('slide_2_repeater')): ?>
					<?php while(has_sub_field('slide_2_repeater')): 
					
						$slide_2_repeater_1 = get_sub_field('slide_2_repeater_1');
						if( !empty($slide_2_repeater_1) ): ?>
							"<?php echo $slide_2_repeater_1; ?>",
								
						<?php endif; ?>
					<?php endwhile; ?>
				<?php endif; ?>
                
                );
                
                var position = new Array (
                    <?php if(get_field('slide_2_repeater')): ?>
					   <?php while(has_sub_field('slide_2_repeater')): 
				    	   $slide_2_repeater_2 = get_sub_field('slide_2_repeater_2');
				    		if( !empty($slide_2_repeater_2) ): ?>
				    			"<?php echo $slide_2_repeater_2; ?>",
				    		<?php endif; ?>
				    	<?php endwhile; ?>
				    <?php endif; ?>
                    
                    );
                );
                var image = new Array(
                    <?php if(get_field('slide_2_repeater')): ?>
					   <?php while(has_sub_field('slide_2_repeater')): 
				    	   $slide_2_repeater_4 = get_sub_field('slide_2_repeater_4');
				    		if( !empty($slide_2_repeater_4) ): ?>
				    			"<?php echo $slide_2_repeater_4; ?>",
				    		<?php endif; ?>
				    	<?php endwhile; ?>
				    <?php endif; ?>
                    
                    );
                )
                var biography = new Array (
                    <?php if(get_field('slide_2_repeater')): ?>
					   <?php while(has_sub_field('slide_2_repeater')): 
				    	   $slide_2_repeater_3 = get_sub_field('slide_2_repeater_3');
				    		if( !empty($slide_2_repeater_3) ): ?>
				    			"<?php echo $slide_2_repeater_3; ?>",
				    		<?php endif; ?>
				    	<?php endwhile; ?>
				    <?php endif; ?>
                    
                    );
                );
                var some_variable = $(this).attr('id');
                var i;
                var n;
                for (i = 0; i < name.length; i++) { 
                    n = name[i].includes(some_variable);
                    if (n == true) {
                        $("#image_id_here").addClass('active-display');
                        $(".modal").addClass('active-display');
                        document.getElementById("name-header-p").innerHTML = name[i];
                        document.getElementById("name-p").innerHTML = name[i];
                        document.getElementById("position-p").innerHTML = position[i];
                        document.getElementById("biography-p").innerHTML = biography[i];
                        document.getElementById('image_id_here').setAttribute('src', image[i]);
                        break;
                    }
                    else {
                        //do nothing
                    }
                }
            });
        });
    </script>