Get Brightcove Videos from repeating field in WordPress via ACF

Question

I have a repeating field in a WordPress site via ACF repeating fields:

      <?php
      if( have_rows('recent_episodes') ):
        $i = 1;
          while ( have_rows('recent_episodes') ) : the_row();

        $image = get_sub_field('video_image');
      ?>

      <!--API CODE HERE-->

        <li class="recent-episode-<?php the_sub_field('brightcove_video_id'); ?> col-md-3 col-sm-4">
          <a href="#">
            <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
            <div class="flex-caption">
              <h6 class="date"><?php the_sub_field('air_date') ?></h6>
              <h5 class="title"></h5>
            </div>
          </a>
        </li>
      <?php
      $i++;
      endwhile; else :
      endif;
      ?>

The brightcove_video_id field is a video ID for a video in Brightcove. Ideally, I would like to pull in the corresponding title for each video in the repeating field. When I put the API code in the repeating area though, it just outputs the last item each time. Here is what I have for the API code:

          var token = "HIDDEN";

          var req = "http://api.brightcove.com/services/library?"
          req += "command=find_video_by_id&token=" + encodeURIComponent(token);
          req += "&video_id=" + videoID;
          req += "&video_fields=id%2Cname%2CshortDescription%2CreferenceId&media_delivery=default//";
          req += "&callback=response";

          // Create a new request object
          bObj = new JSONscriptRequest(req);
          // Build the dynamic script tag
          bObj.buildScriptTag();
          // Add the script tag to the page
          bObj.addScriptTag();

        function response(jsonData) {
          jQuery('li.recent-episode-' + videoID ).find('h5').html(jsonData.name);
        }

I've tried using an each function as well without avail. I am sure I am just missing something in the Javascript, but you could use some help figuring it out.

Thanks!

Answer 1

The scope of videoID in your function is global. You're updating its value each time you iterate through the script. By the time the callbacks are triggered (asynchronously) it's looped through and videoID has the last value you last set it to.

Since the JSON returned from the API includes the id, it would be simplest to just use that:

function response(jsonData) {
  jQuery('li.recent-episode-' + jsonData.id ).find('h5').html(jsonData.name);
}