title: Rendering a Wordpress shortcode with Javascript from a JSON object?
body: <p>I'm currently working on a Wordpress site. I'm building a custom plugin that allows for lazy loading of custom post types. </p>
  
  <p>Some of these post types contain shortcodes, that I need to display. I have a primary Javascript file that makes Ajax requests to my PHP code in my plugin, which returns a JSON object containing the shortcode like this:</p>
  
  <p><code>Object {shortcode: "[embedyt]https://www.youtube.com/watch?&amp;height=300[/embedyt]"}</code></p>
  
  <p>I'm then trying to display this shortcode on the front-end, since I'm dynamically building HTML blocks based on the JSON response. </p>
  
  <p>However, when I try to output the shortcode to the page via the Javascript, it just displays as text, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/9ZxPW.png" alt="enter image description here"></p>
  
  <p>Here's my PHP code and Javascript:</p>
  
  <pre><code>$packet = array();
  $formatted_url = "[embedyt]" . $youtube_root . $video_id . "&amp;height=300" . "[/embedyt]";
  $packet["shortcode"] = do_shortcode($formatted_url);
  echo json_encode($packet); // This sends a response back to the Ajax request
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>$.ajax({
          type: 'POST',
          url: tlas_lazy_load.ajax_url,
          data: {
              action: 'tlas_lazy_load',
              post_type: post_type,
              posts_per_page: 6,
              paged: page
          },
          success: function(packet) {
              response = JSON.parse(packet);
              for(var i = 0; i &lt; response.length; i++) {
                  build_lazy_load("#lazy-load-row", packet[i], i);
              }
          }
      });
  
  function build_lazy_load(element, packet, index) {
      var block = "";
      block += "&lt;div class=\"col-md-4\"&gt;";
      block += "  &lt;div class=\"video-individual\"&gt;";
      block += "      &lt;div class=\"panel panel-default\"&gt;";
      block += "          &lt;div class=\"panel-body\" id=" + index + "&gt;";
      block +=                packet.shortcode;
      block += "          &lt;\/div&gt;";
      block += "      &lt;\/div&gt;";
      block += "  &lt;\/div&gt;";
      block += "&lt;\/div&gt;";
      $(element).append(block);
  };
  </code></pre>
  
  <p>What gives me hope that this can be done is the answer to this question: </p>
  
  <p><a href="https://stackoverflow.com/questions/16304706/wordpress-outputting-shortcode-with-javascript">Wordpress: Outputting shortcode with Javascript?</a></p>
  
  <p>And I'm following along with what that person suggested. However can this be done?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>So I can display the shortcode if I do this in enqueue scripts method:</p>
  
  <pre><code>add_action( 'wp_enqueue_scripts', 'tlas_lazy_load_enqueue_scripts' );
  function tlas_lazy_load_enqueue_scripts() {
      wp_enqueue_script( 'tlas-lazy-load', plugins_url( 'js/tlas_lazy_load.js', __FILE__ ), array('jquery'), '1.0', true );
      wp_localize_script( 'tlas-lazy-load', 'tlas_lazy_load', array(
          'ajax_url' =&gt; admin_url( 'admin-ajax.php' )
          // BELOW
          'videos_shortcode' =&gt; do_shortcode("[embedyt]" . $youtube_root . $video_id . "&amp;height=300" . "[/embedyt]")
          ));
  }
  </code></pre>
  
  <p>By setting it as a localized variable which my Javascript can access. The problem is that I have to add the shortcode after this function has already been declared. I tried localizing it later within the file in my above function by doing:</p>
  
  <pre><code>...
  $packet = array();
  $formatted_url = "[embedyt]" . $youtube_root . $video_id . "&amp;height=300" . "[/embedyt]";
  wp_localize_script( 'tlas-lazy-load', 'tlas_lazy_load', array(
      'videos_shortcode' =&gt; do_shortcode($formatted_url)
  ));
  ...
  </code></pre>
  
  <p>But this didn't work, it simply returned nothing. I'm on the right track (I think?) but I'm not sure how you can dynamically localize a script/Javascript variable.</p>