Answers.Body: <p>I am not sure if the code does what you want it to do - but nevertheless you have three {% endif %} but only two {% if %}. Assuming the line</p>
  <pre><code>dynamicEl: [{% endif %}{%- if not loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; },{% endif %}
  </code></pre>
  <p>has one surplus endif tag just at the beginning of the array which prematurely ends the if clause, your code correctly would be:</p>
  <pre><code>{% js %}  
     {% if image %}  
         {%- if loop.first -%}
             window.addEventListener('DOMContentLoaded', function() {
                 (function($) {
         $('.slider-pop').on('click', function() {
                  $(this).lightGallery({
                      dynamic: true,
                      download: false,
                      zoom: false,
                      hash: false,
                      dynamicEl: [
                         {%- if not loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; },{% endif %}
                             {%- if loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; }]
                  })  
              });
              })(jQuery);
              });
          {% endif %}
      {% endif %}
  {% endjs %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-02-09T16:59:28.377Z
Answers.LastActivityDate: 2021-02-09T16:59:28.377Z
Answers.UserDisplayName: MisterMike
Body: <p>I'm trying to output matrix content to create a javascript for my gallery. When I wrap the output with the <code>{% js %}</code>tag each line has an extra semicolon at the end like this:</p>
  <pre><code>{ &quot;src&quot;: &quot;/assets/uploads/_wsHigh/cp_slideshow_lg_img1.jpg&quot;, &quot;width&quot;:&quot;1440&quot;, &quot;height&quot;:&quot;810&quot; },;
  { &quot;src&quot;: &quot;/assets/uploads/_wsHigh/cp_slideshow_lg_img2.jpg&quot;, &quot;width&quot;:&quot;1440&quot;, &quot;height&quot;:&quot;810&quot; },; 
  </code></pre>
  <p>If I output as text its not there. How would I get rid of it?</p>
  <pre><code> {% js %}
       
  {% if image %}  
  {%- if loop.first -%}
  window.addEventListener('DOMContentLoaded', function() {
      (function($) {
  $('.slider-pop').on('click', function() {
           $(this).lightGallery({
               dynamic: true,
               download: false,
               zoom: false,
               hash: false,
               dynamicEl: [{% endif %}{%- if not loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; },{% endif %}
               {%- if loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; }]
           })  
       });
       })(jQuery);
       });
   {% endif %}{% endif %}{% endjs %}
  </code></pre>
  
Tags: <templating>
Title: JS tag is adding semicolons to my content
ThreadText: # JS tag is adding semicolons to my content
  
  (Asked by: username_0 on 2021-02-08)
  
  I'm trying to output matrix content to create a javascript for my gallery. When I wrap the output with the `{% js %}`tag each line has an extra semicolon at the end like this:
  
  ```
  { "src": "/assets/uploads/_wsHigh/cp_slideshow_lg_img1.jpg", "width":"1440", "height":"810" },;
  { "src": "/assets/uploads/_wsHigh/cp_slideshow_lg_img2.jpg", "width":"1440", "height":"810" },; 
  
  ```
  
  If I output as text its not there. How would I get rid of it?
  
  ```
   {% js %}
       
  {% if image %}  
  {%- if loop.first -%}
  window.addEventListener('DOMContentLoaded', function() {
      (function($) {
  $('.slider-pop').on('click', function() {
           $(this).lightGallery({
               dynamic: true,
               download: false,
               zoom: false,
               hash: false,
               dynamicEl: [{% endif %}{%- if not loop.last -%}{ "src": "{{ image.getUrl('wsHigh') }}", "width":"{{ img.getWidth('wsHigh') }}", "height":"{{ img.getHeight('wsHigh') }}" },{% endif %}
               {%- if loop.last -%}{ "src": "{{ image.getUrl('wsHigh') }}", "width":"{{ img.getWidth('wsHigh') }}", "height":"{{ img.getHeight('wsHigh') }}" }]
           })  
       });
       })(jQuery);
       });
   {% endif %}{% endif %}{% endjs %}
  
  ```
  
  **Tags:** templating
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2021-02-09. Score: 1
  
  I am not sure if the code does what you want it to do - but nevertheless you have three {% endif %} but only two {% if %}. Assuming the line
  
  ```
  dynamicEl: [{% endif %}{%- if not loop.last -%}{ "src": "{{ image.getUrl('wsHigh') }}", "width":"{{ img.getWidth('wsHigh') }}", "height":"{{ img.getHeight('wsHigh') }}" },{% endif %}
  
  ```
  
  has one surplus endif tag just at the beginning of the array which prematurely ends the if clause, your code correctly would be:
  
  ```
  {% js %}  
     {% if image %}  
         {%- if loop.first -%}
             window.addEventListener('DOMContentLoaded', function() {
                 (function($) {
         $('.slider-pop').on('click', function() {
                  $(this).lightGallery({
                      dynamic: true,
                      download: false,
                      zoom: false,
                      hash: false,
                      dynamicEl: [
                         {%- if not loop.last -%}{ "src": "{{ image.getUrl('wsHigh') }}", "width":"{{ img.getWidth('wsHigh') }}", "height":"{{ img.getHeight('wsHigh') }}" },{% endif %}
                             {%- if loop.last -%}{ "src": "{{ image.getUrl('wsHigh') }}", "width":"{{ img.getWidth('wsHigh') }}", "height":"{{ img.getHeight('wsHigh') }}" }]
                  })  
              });
              })(jQuery);
              });
          {% endif %}
      {% endif %}
  {% endjs %}
  
  ```
  
  
  ---
  
  