使用带有ejs视图的node.js从JSON获取所有图像

Question

我正在学习node.js，遇到一个问题，我需要使用ejs视图显示从JSON数组到前端的所有图像。 我的JSON看起来像这样：

[
{
    "id":1,
    "avatar":"../img/hof/Biba.jpg",
    "position":1,
    "cups":[
        "../img/pokal_euro.png",
        "../img/pokal_lp.png",
        "../img/pokal_wc.png"
    ],
    "points":634,
    "prize":852
}

]

我试图调用图像的我的ejs文件是这样的

<% dataSorted.forEach(function(dat) { %>
       <img src="<%= dat.avatar %>">
        <div class="mesto"><h1><%= dat.position %></h1></div>
        <div class="cups">
        <img src="<%= dat.cups[0] %>" class="pokal"/>
        </div>
        <h4 class="levo"><%= dat.points %> točk</h4>
        <h4 class="desno"><%= dat.prize %>€</h4>
  <% }); %>

我究竟做错了什么？

Answer 1

您需要遍历杯子，因此如果dataSorted中的杯子为：

<% for (var i = 0; i < dataSorted['cups'].length; i++) { %>
    <div class="cups">
        <img src="<%= dataSorted['cups'][i] %>"/>
    </div>
<% }; %>

更新

如果正确理解您的问题，则需要显示所有项目的所有图像：

<% dataSorted.forEach(function(dat) { %>
       <img src="<%= dat.avatar %>">
        <div class="mesto"><h1><%= dat.position %></h1></div>
        <% for (var i = 0; i < dat['cups'].length; i++) { %>
            <div class="cups">
                <img src="<%= dat['cups'][i] %>"/>
            </div>
        <% }; %>
        <h4 class="levo"><%= dat.points %> točk</h4>
        <h4 class="desno"><%= dat.prize %>€</h4>
  <% }); %>