javascript - 我如何创建一个包含日期值和图像的 javascript 对象数组。要求如下:

Question

要求

1. 需要以下格式:

   var news = [{caption: STRING_VALUE, post_time: DATE_VALUE, description: STRING_VALUE, image: IMAGE},....];

2. 这应该作为虚拟数据放置在服务器端。 (即，不是在数据库上，但如果成功，我需要使用 Mondodb 和 Node.js 来实现它。目前我仅使用 Node.js，遵循 MVC)

3. 将此虚拟数据使用到 li 标记内的网页中，如下所示:(我使用 ejs 作为 View 引擎)

   <ul> <% for (var i=0;i<news.length;i++){ %> <li><%=news[i].description+" -- "+news[i].post_time%></li> <%}%> </ul>

Answer 1

由于数据必须通过网络进行通信，因此我们不会直接在数据中发送日期值对象或图像对象。相反，发送图像相对路径并依赖浏览器渲染它并传递日期时间字符串，然后在 js 中解析它。

假设您现在将使用相对路径/images 将图像保存在服务器上。您可以将服务器端点配置为返回 javascript 数组!(JSON 数组)为

[
    {
        "caption": "This is Image 1",
        "post_time": "2017-10-12",
        "description": "This is Image 1 description",
        "image":"/images/image1.png"
    },
    {
        "caption": "This is Image 2",
        "post_time": "2017-10-13",
        "description": "This is Image 2 description",
        "image":"/images/image2.png"
    }
]

在ejs中，您将能够使用img标签来显示图像。

<ul>
<% for (var i=0;i<news.length;i++){ %>
<li>
    <img src="<%= news[i].image %>" alt="">
    <%=news[i].description+" -- "+news[i].post_time%>
</li>
<%}%>
</ul>