How to use a Django for-loop in Javascript?

Question

I am trying to loop over a Django array named special_ads in Javascript. The idea is that I can create Javascript advert objects and store these in a Javascript array. These objects are used to select a certain ad and display additional information.

<script type="text/javascript">
  ADS = new slideshow();
  {% for ad in special_ads %}
    ADS.add_ad(new advert(
              "{{ ad.image }}",
              "Drie halen twee betalen",
              "{{ ad.company.name }}",
              "{{ ad.description }}",
              "{{ MEDIA_URL }}{{ ad.image }}",
              "{% thumbnail ad.image 55x55 crop %}",
              "brown",
              "white"
            ));
  {% endfor %}
</script>


//==================================================
// ad object
//==================================================
function advert(id,title,company,description,normal_image_src,thumb_image_src,background_color,text_color) {
  this.id = id;
  this.title = title;
  this.company = company;
  this.description = description;
  this.normal_image_src = normal_image_src;
  this.thumb_image_src = thumb_image_src;
  this.background_color = background_color;
  this.text_color = text_color;
}

I can't really use a JSON list, because I also need the same array in the html at page load, as seen below.

{% for ad in special_ads %}
  <dd>
    <a id="std_ad_{{ i }}" class="img">
      <img id="{{ ad.image }}" class="enlarge" src="{% thumbnail ad.image 55x55 crop %}" alt="{{ ad.company.name }}" onclick="ADS.display(this)"/>
    </a>
  </dd>
{% endfor %}

The problem is that this does not work correctly. The page loads correctly, but the adverts are not added to the array. Also the Django part seems to execute correctly. The page source results in the following.

<script type="text/javascript">
  ADS = new slideshow();

    ADS.add_ad(new advert(
              "ads/logo_copy.jpg",
              "Drie halen twee betalen",
              "Directdoen.nl",
              "DirectDoen helpt u graag met schoonmaken, tuinonderhoud en klussen. Bij DirectDoen bent u voor hulp in en om uw huis aan",
              "http://127.0.0.1:8000/media/ads/logo_copy.jpg",
              "",
              "brown",
              "white"
            ));

    ADS.add_ad(new advert(
              "ads/Untitled-1.jpg",
              "Drie halen twee betalen",
              "Jouwstraat.nl",
              "Jouwstraat.nl is een website waar buren &amp; straatgenoten met elkaar in contact kunnen
komen en blijven. Kijk dus snel op .
",
              "http://127.0.0.1:8000/media/ads/Untitled-1.jpg",
              "",
              "brown",
              "white"
            ));

    ADS.add_ad(new advert(
              "ads/AD.JPG",
              "Drie halen twee betalen",
              "Code 06",
              "DirectDoen helpt u graag met schoonmaken, tuinonderhoud en klussen. Bij DirectDoen bent u voor hulp in en om uw huis aan
",
              "http://127.0.0.1:8000/media/ads/AD.JPG",
              "http://127.0.0.1:8000/media/ads/AD_JPG_55x55_crop_q95.jpg",
              "brown",
              "white"
            ));

</script>

I have already searched a lot, but I was unable to find a good tutorial on how to do this. Is there anyone who knows what is the best way of achieving my goal?

Answer 1

The question is incorrect as the Django for-loop is clearly not your problem. I guess that it has something to do with the advert or slideshow class. Does your js console not give any errors..?