How to calculate where to add `<tr> and </tr>` when formatting JSON Data as an HTML Table?

Question

So what I want to do I'm sure has been done thousands of times. I am just having trouble finding the solution.

I am receiving some JSON data that looks like this

{"ImageCollection":
{"Images":
[{  "ImageID":"68",
    "CatID":"1",
    "Location":"/Images/Art/Full/68.gif",
    "ClipLocation":"/Images/Art/Clips/68.gif",
    "FullHeight":"504",
    "FullWidth":"451"
   },
   { "ImageID":"69",
     "CatID":"1",
     "Location":"/Images/Art/Full/69.gif",
     "ClipLocation":"/Images/Art/Clips/69.gif",
     "FullHeight":"364",
     "FullWidth":"500"
    },
    etc. etc 
 ]
 }
}

and I want to display the images in a table that is 4 columns wide. I have the following

    <script type="text/javascript">
    $.getJSON("/Service/GetJson.ashx?data=images", function(data) {
        var jsObjectData = data.ImageCollection.Images;
        var imageTable = "<table><tbody>";
        var rowMarker = 1;
        var targetRowEnd;
        $.each(jsObjectData, function(i, item) {
            if (
            imageTable = imageTable + "<td class='artImageBox'>";
            imageTable = imageTable + "<a title='Click To Add' class='artImage'>";
            imageTable = imageTable + "<img id='ArtImg";
            imageTable = imageTable + item.ImageID;
            imageTable = imageTable + "' src='../";
            imageTable = imageTable + item.ClipLocation;
            imageTable = imageTable + "' alt='Click To Add' />";
            imageTable = imageTable + "</a></td>";
        });
        imageTable = imageTable + "</tbody></table>";
        alert(imageTable);
        $("body").append(imageTable);
    });
</script>

But I have not had any luck in calculating where to place the the <tr> and the </tr>.

Answer 1

Keep a running total and break using modulo 4 (totalImages % 4 == 0).

That should do it.

i.e.:

<script type="text/javascript">
$.getJSON("/Service/GetJson.ashx?data=images", function(data) {
    var jsObjectData = data.ImageCollection.Images;
    var imageTable = "<table><tbody>";
    var rowMarker = 1;
    // Initialise our counter
    var imageCount = 0;
    var targetRowEnd;
    $.each(jsObjectData, function(i, item) {
        // Is the count exactly divisble by 4, i.e. start of a new row
        if (imageCount % 4 == 0) {
            imageTable = imageTable + "<tr>";
        }
        imageTable = imageTable + "<td class='artImageBox'>";
        imageTable = imageTable + "<a title='Click To Add' class='artImage'>";
        imageTable = imageTable + "<img id='ArtImg";
        imageTable = imageTable + item.ImageID;
        imageTable = imageTable + "' src='../";
        imageTable = imageTable + item.ClipLocation;
        imageTable = imageTable + "' alt='Click To Add' />";
        imageTable = imageTable + "</a></td>";
        // Count the image we've just inserted
        imageCount++;
        // If the count is again divisible exactly by 4 then it's the end of a row
        // and will be the start of a new row on the next loop.
        if (imageCount % 4 == 0) {
            imageTable = imageTable + "</tr>";
        }
    });
    // Just in case there are not exactly 4 images in the last row lets
    // add a row terminator for the final row if it hasn't met the condition above
    if (imageCount % 4 != 0) {
        imageTable = imageTable + "</tr>";
    }
    imageTable = imageTable + "</tbody></table>";
    alert(imageTable);
    $("body").append(imageTable);
});
</script>