How to output values from a loop into a javascript array

Question

I'm building a custom shortcode in Wordpress. Essentially what I want this to do is the following:

1. Dynamically pull values from a group of Advanced Custom Fields
2. Output those values into a javascript array, comma-separated

Where I'm getting stuck is that I can successfully run a loop over the group of fields and grab all the values and output them on a page. However, when I attempt to store them into a variable to be pulled into a javascript array ($v is stored in the output variable which is referenced in the urls array), it only returns one of those values.

How can I get all the values from the foreach ( $value as $v) to list inside of the urls array, with comma separation? Any help would be appreciated :)

add_shortcode('training-player', 'training_player');
// Add shortcode for Diagnostic media playlist
function training_player() {
  $author_id = get_the_author_meta('ID');
  $fields = acf_get_fields(405);
  if( $fields ) {
    echo '<div id="player"></div>';
    foreach( $fields as $field ) {
      $value = get_field( $field['name'], 'user_'. $author_id );
      if(!empty($value)) {
        if ($value) {
          foreach ( $value as $v) {
            echo $v;
          }
        }
      }
    }
    echo "
    <script src='https://luwes.github.io/vimeowrap.js/vimeowrap.js'></script>
    <script src='https://luwes.github.io/vimeowrap.js/vimeowrap.playlist.js'></script>
    <script>
      var output = '$v';
      console.log(output)
      vimeowrap('player').setup({
        urls: [
          output
        ],
        plugins: {
          'playlist':{}
        }
      });
    </script>
    ";
  }
}

Answer 1

This is not really a Wordpress question. However you probably need the implode php function, using a comma as glue.

foreach( $fields as $field ) {
  $value = get_field( $field['name'], 'user_'. $author_id );
  if(!empty($value)) {
    if ($value) {
      $v = implode(',', $value);
    }
  }
}

Answer 2

This might get your desired output:

<?php
add_shortcode('training-player', 'training_player');
// Add shortcode for Diagnostic media playlist
function training_player() {
    $author_id = get_the_author_meta('ID');
    $fields    = acf_get_fields(405);
    $js_values = [];

    if( $fields ) {
        echo '<div id="player"></div>';
        foreach( $fields as $field ) {
            $value = get_field( $field['name'], 'user_'. $author_id );

            if(!empty($value)) {
                if ($value) {
                    foreach ( $value as $v) {
                        $js_values[] = $v;
                    }
                }
            }
        }

        echo "
<script src='https://luwes.github.io/vimeowrap.js/vimeowrap.js'></script>
<script src='https://luwes.github.io/vimeowrap.js/vimeowrap.playlist.js'></script>
<script>
var output = " . wp_json_encode( $js_values ) . ";
console.log(output)
vimeowrap('player').setup({
urls: [
output
],
plugins: {
'playlist':{}
}
});
</script>
";
    }
}

We're storing the value of $v in the $js_values array, and then outputting it in a format workable with Javascript using wp_json_encode instead of trying to directly put it into Javascript.

For future reference, you may want to look at [wp_localize_script](https://developer.wordpress.org/reference/functions/wp_localize_script/) for getting values from PHP to Javascript "the WordPress way", and enqueue the rest of your JS using [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script), but that's beyond the scope of this answer.