Weird KRL foreach behavior

Question

Today I get some weird behavior using foreach. I have a dataset that pulls out a JSON document. Part of this array is the array that I pick() came out and sent to foreach. Here is my global block:

 global { dataset appserver <- "http://imaj-app.lddi.org:8010/list/popular" cachable for 1 hour; popular = appserver.pick("$..images") } 

It has one rule that sets the page. It looks like this:

 rule setup { select when web pageview "www\.google\.com" pre { imagelist = << <div id="462popular" style="margin-left:auto;margin-right:auto;width:450px"> <p>Popular images from the CS 462 <a href="http://imaj-web.lddi.org/">Image Project</a></p> <span class="image"></span> </div> >>; } prepend('#footer', imagelist); } 

And here is a rule that doesn't work:

 rule images { select when web pageview "www\.google\.com" foreach popular setting (image) pre { thumburl = image.pick("$..thumburl"); viewurl = "http://imaj-web.lddi.org/view?imagekey=" + image.pick("$..imagekey"); html = << <span class="image"><a href="#{viewurl}"><img src="#{thumburl}" style="border:none"/></a></span> >>; } after('#462popular .image', html); } 

I get something like this (note how small the thumb is to scroll):

Any ideas what is going on here?

Answer 1

You have a recursion problem with your html structure and yours after the selector to insert new content.

Your selector to insert new content

 #462popular .image 

which means that the html content will be inserted after each element with the image class inside the element with id # 462popular.

Inside the html you are inserting, you have an element with the name of the image class, which means that you multiply the number of elements with the image class inside # 462 popular every time you go through the loop.

:)