在 EJS 中循环 JSON

2023-12-25

我在下面的 EJS 中有代码,

<script>
    var row =<%-JSON.stringify(data)%>
    console.log(row);
</script>
<% for(var i=0; i<JSON.stringify(data).length; i++) {%>
   <tr>
     <td>
       <%= JSON.stringify(data)[i].id%>
     </td>
   </tr>
<% } %>

行的输出是正确的,是一个由 3 个对象组成的数组,每个对象都有属性 id、名称等。我可以操作该行来填充 JS 中的表。但是,我想知道是否有办法可以按照上述方式完成它?

当我运行上面的代码时,JSON.stringify(data).length不是3,而是整个字符串的长度。

另一个问题是当我尝试添加时

或 ,它给了我“未定义”错误...

帮助赞赏。

问候 锤子


JSON.stringify返回一个String。因此,例如:

var data = [
    { id: 1, name: "bob" },
    { id: 2, name: "john" },
    { id: 3, name: "jake" },
];

JSON.stringify(data)

将返回相当于:

"[{\"id\":1,\"name\":\"bob\"},{\"id\":2,\"name\":\"john\"},{\"id\":3,\"name\":\"jake\"}]"

as a String value.

所以当你有

<% for(var i=0; i<JSON.stringify(data).length; i++) {%>

最终的结果是:

<% for(var i=0; i<"[{\"id\":1,\"name\":\"bob\"},{\"id\":2,\"name\":\"john\"},{\"id\":3,\"name\":\"jake\"}]".length; i++) {%>

这可能是not你想要什么。你可能会做什么do想要的是这样的:

<table>
<% for(var i=0; i < data.length; i++) { %>
   <tr>
     <td><%= data[i].id %></td>
     <td><%= data[i].name %></td>
   </tr>
<% } %>
</table>

这将输出下表(使用示例data从上面):

<table>
  <tr>
    <td>1</td>
    <td>bob</td>
  </tr>
  <tr>
    <td>2</td>
    <td>john</td>
  </tr>
  <tr>
    <td>3</td>
    <td>jake</td>
  </tr>
</table>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 EJS 中循环 JSON 的相关文章

随机推荐

  • 从静态工厂类访问 ASP.NET Core DI 容器

    我创建了一个 ASP NET Core MVC WebApi 站点 该站点具有基于 James Still 博客文章的 RabbitMQ 订阅者使用 RabbitMQ 进行真实世界的 PubSub 消息传递 http www squarew
  • ASP.NET Core 2.0 Razor 与 Angular/React/等

    我开始开发企业级 Web 应用程序 该应用程序将有许多单独的网页 但其中两个页面更集中且非常繁重 繁重 如大量用户交互 显示大量数据的模式 Websocket 连接 聊天等 我被任命为该项目的首席架构师 因此我正在对最新的 Web 框架进行
  • 使用 RabbitMQ 的工作池和多租户队列

    我开发的 Web 应用程序是一个基于多租户云的应用程序 很多客户端 每个客户端都有自己独立的 环境 但都在共享的硬件集上 我们正在引入用户批量处理的功能为后期处理工作 批处理工作的类型实际上并不重要 只是数量足够 没有工作队列就不太实际 我
  • Eclipse Neon - 禁用欢迎屏幕

    如何禁用 Eclipse Neon 中的欢迎屏幕 虽然有一个Eclipse Juno 的类似问题 https stackoverflow com questions 14637755 eclipse juno how to disable
  • Gridview 中的 DropDownList SelectedIndexChanged 未触发!

    虽然我一直在寻找解决方案 但看到很多帖子向我展示了如何做到这一点 但当 DropDownList 更改时 我无法触发我的 SelectedIndexChanged 事件 DropDownList AutoPostBack 设置为 True
  • 用户权限更改后强制重新验证

    在我的应用程序中 我可以更改后端的用户权限和角色 当用户登录并且我删除用户的角色时 该用户仍然可以访问他实际上不再被允许访问的内容 因为他缺少该角色 仅当用户通过注销 登录重新验证自己时 更改才会生效 所以我的问题是 我可以访问登录用户 不
  • 在 contentEditable

    我正在寻找一个明确的跨浏览器解决方案 当 contentEditable on 重新获得焦点时 将光标 插入符号位置设置为最后一个已知位置 内容可编辑 div 的默认功能似乎是每次单击时将插入符号 光标移动到 div 中文本的开头 这是不可
  • Sparklyr:validate_java_version_line(主版本)中的错误

    R version 3 5 2 2018 12 20 Eggshell Igloo Copyright C 2018 The R Foundation for Statistical Computing Platform x86 64 ap
  • 从 Android 中的原始文件夹设置铃声

    我正在尝试读取 访问 Raw 文件夹中的 mp3 文件 然后将其设置为默认铃声 但它无法找到它 我的代码是 Uri path Uri parse android resource com applenty LearnToCount raw
  • SwiftUI CoreData 异步获取

    我在 macOS 应用程序中使用 CoreData 和 SwiftUI 我主要利用的是 FetchRequest在 SwiftUI 中 向数据库发出我的请求 我注意到当数据库中有多个对象时 FetchRequest 需要更多时间 此外 我正
  • 从 Image.open 获得的数组,其中 np.asarray 是不可变的 - “赋值目标是只读的”

    我的目标是读取一组 PNG 文件 使用以下命令创建图像Image open filename 并将它们转换为只有 1 和 0 的简单二维数组 PNG 的格式为 RGBA 值大多只有 255 和 0 在图像中 边缘通常是灰度值 我想在二维数组
  • 事件处理程序中的图像调整器 User.Identity

    添加了一个 AuthorizeImage 事件处理程序来限制图像访问 当我尝试检查用户名和身份验证状态时注意到以下内容 下面不会导致异常 但似乎会破坏它 无论是否通过身份验证 都会显示未找到图像的默认图标 测试了 this User 相同的
  • ODP.NET是否需要安装Oracle客户端

    我必须从 NET 代码连接 Oracle 11g DB 为此 我安装了 ODP NET 但在阅读了一些论坛帖子后 我意识到我也需要安装 Oracle 客户端 真的吗 我看到 Oracle 客户端的大小为 ca 2GB 我真的需要安装这么大的
  • ConcurrentMap.remove() 是否在 get() 返回 null 之前提供happens-before 边?

    调用之前线程中是否有操作ConcurrentMap remove 保证发生在之前看到从另一个线程删除后的操作 文档 https docs oracle com javase 8 docs api java util concurrent p
  • 谷歌地图API只返回城市?

    我正在尝试使用 Google 地图 API 仅从 json 请求返回城市 https maps googleapis com maps api place autocomplete json input green 20lanes type
  • Spyder - UMD 已删除:模块

    我已经用 python 闲逛了大约一个月了 有些事情困扰着我 我使用 python x y 工具包 它附带了简洁的 Spyder IDE 我的问题涉及 Spyder 的 UMD 用户模块删除器 I found this http mcsp
  • ZonedDateTime.parse 不适用于解析 am 或 pm 时间

    我正在学习java 试图构建一个工具 根据用户输入 时间 时区A和时区B的输入 将特定时间从时区A转换为时区B 这是关于该工具以特定格式收集时间并将其转换为 ZonedDateTime 对象的部分 import java time Zone
  • 仅当总计数小于阈值时才将行插入 SQL Server 表中

    我正在使用 SQL Server 2012 我有一个存储用户的表 允许的最大用户数为 100 万 我有一个正在注册用户的存储过程 当我插入时 我想确保 users 表中的总行数不会超过 100 万 我更愿意使用允许最大并发性的方法 我相信我
  • 创建适用于 Windows 的用户和访问规则 Github

    我刚刚使用安装了 Githttp windows github com http windows github com 它似乎安装正确 但我无法创建新用户和访问控制设置来访问存储库 我试图查看文档 但不包含类似的内容 我不确定 Window
  • 在 EJS 中循环 JSON

    我在下面的 EJS 中有代码 tr td td tr 行的输出是正确的 是一个由 3 个对象组成的数组 每个对象都有属性 id 名称等 我可以操作该行来填充 JS 中的表 但是 我想知道是否有办法可以按照上述方式完成它 当我运行上面的代码时