foreach loop in json object data

Question

I working on some web app and I have a json returned from the backend , it looks something like this

    [
  {
    "Client": "something",
    "Market": "something",
    "Media": "something",
    "Research link (Google docs)": null,
    "Thumbnail": "\/web\/uploads\/5202036b0980b.jpeg",
    "Image1": "\/web\/uploads\/52022df0a0622.jpeg",
    "Image2": "\/web\/uploads\/52022e1a3e7c8.jpeg",
    "Image3": "\/web\/uploads\/52022e3520370.jpeg",
    "Image4": "\/web\/uploads\/52022e630e634.jpeg",
    "Image5": "",
    "id": 983
  },..............
]

Im working in backbone , so Im using underscor for templating , my question is

Because fot this images , Image1 , Image2 ... I have a Html structure like this

<ul class="slides">
              <li>
                 <img src="http://placehold.it/760x300" alt="" />
              </li>
              <li>
                   <img src="http://placehold.it/760x300" alt="" />
              </li>
              <li>
                    <img src="http://placehold.it/760x300" alt="" />
              </li>
 </ul>

How to do loop stuff thru these images and print them in this structure ?

whats confusing me is that I dont have a separated object for slides :/

Answer 1

Does the amount of Image* vary or is it always 5 images? If it is always five you can extract them one by one:

<img src="<%= response[0].Image1 %>" />
<img src="<%= response[0].Image2 %>" />
etc

If not, you'll have to check if the property exists:

var i = 1;
while (response[0].hasOwnProperty('Image'+i)) {
    <img src="<%= response[0]['Image'+i] %>" />

Answer 2

Use jquerys $.each() which can loop across object properties http://api.jquery.com/each/

<%
$.each(object, function(key, value){
    if(keyStartsWithImage){
%>       
   <li>
         <img src="<%=value%>" />
   </li>
<%
    }
});
%>