php - How to output values from a loop into a javascript array

admin管理员组

文章数量:1430551

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='.js/vimeowrap.js'></script>
    <script src='.js/vimeowrap.playlist.js'></script>
    <script>
      var output = '$v';
      console.log(output)
      vimeowrap('player').setup({
        urls: [
          output
        ],
        plugins: {
          'playlist':{}
        }
      });
    </script>
    ";
  }
}

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>
    ";
  }
}

• php
• loop
• shortcode
• javascript
• advanced-custom-fields

Share Improve this question edited Apr 30, 2019 at 15:44 Noah asked Apr 30, 2019 at 13:58 NoahNoah 111 bronze badge 5

• Add $v_all = []; before foreach( $fields as $field ), replace foreach ( $value as $v) { ... } with $v_all[] = implode(',', $value);, and above echo add $v = implode(',', $v_all);. – nmr Commented Apr 30, 2019 at 16:11
• Shortcodes should return content instead of displaying it. – nmr Commented Apr 30, 2019 at 16:13
• @nmr This worked perfectly. Read up on implode after you and the previous poster mentioned it - understanding this a bit more. One last question. What if you wanted to wrap each individual value in quotes. How would you do that? – Noah Commented Apr 30, 2019 at 16:23
• array_reduce or array_walk. For example: array_walk( $value, function(&$item) { $item = '"' . $item . '"'; } ); added before $v_all[] = implode(',', $value);. – nmr Commented Apr 30, 2019 at 16:35
• @nmr Awesome, that did the trick. You're the best! I think the only thing left for me to figure out is the output variable not being being parsed correctly when it's brought into the JSON. – Noah Commented Apr 30, 2019 at 17:23

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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);
    }
  }
}

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/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/reference/functions/wp_enqueue_script), but that's beyond the scope of this answer.

本文标签： phpHow to output values from a loop into a javascript array