Question

我正在开发一些网络应用程序，我从后端返回了一个json，它看起来像这样

    [
  {
    "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
  },..............
]

我在骨干网工作，所以我使用underscor进行模板化，我的问题是

因为这个图像，Image1，Image2 ......我有像这样的Html结构

<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>

如何通过这些图像循环填充并在此结构中打印它们？

令我困惑的是，我没有幻灯片的分隔对象：/

Answer 1

图像*的数量是变化还是总是5张图像？如果总是五，你可以逐一提取它们：

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

如果没有，您将必须检查该属性是否存在：

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

Answer 2

使用可以循环对象属性的jquerys $.each() http://api.jquery.com/each/

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

在json对象数据中的foreach循环

2 个答案: