在前端 javascript 上处理从后端发送的数据答案

【问题标题】：Handle data sent from back-end on front-end javascript在前端 javascript 上处理从后端发送的数据
【发布时间】：2020-11-27 16:44:06
【问题描述】：

我有一个 NodeJS Express 后端。

当它接收到路由 /messages/ 的 GET 请求时，它会在数据库中获取消息，构建一个名为 messageList 的数组并填充视图，然后毫无问题地呈现给用户。

这是处理请求的代码，在 Express 路由器 messages.js：

router.get('/', async (req, res) => {
    const messageList = await req.app.get('messageHandler').get();
    res.render('messages', { messageList: messageList });
});

这是messages.ejs 文件中的视图模板的一部分：

<table>
    <% for (var i = 0; i < messageList.length; i++) { %>
        <tr id="msg-<%= i %>"><td><%= messageList[i].title %></td></tr>
    <% } %>
<table>

这一切都完美无缺。

但是，我希望最终在前端 javascript 中处理这些消息，通过使用给定的 id 属性抑制 <tr> 来应用过滤器。

有没有办法将数组messageList传递给前端javascript，或者在页面加载时将其作为javascript数组加载？？

提前致谢！ =)

【问题讨论】：

看不懂，messageList不是已经是JavaScript数组了吗？
只需过滤messageList 数组，而不是使用for 循环。
@OrAssayag 是的，但在后端部分。我想在前端有一个副本，这样我可以处理它。
@GabrielLupu 假设我实现了一个搜索字段，用户可以在其中输入他/她正在寻找的值...我想在前端进行，而无需创建新的 http请求应用它。
<script>const messageList = <%= messageList %></script> 怎么样？

标签： javascript node.js express

【解决方案1】：

@Vinas 来自您的一条评论

@OrAssayag 是的，但在后端部分。我想在前端有一份它的副本，这样我就可以处理我了

和

@GabrielLupu 假设我实现了一个搜索字段，用户可以在其中输入他/她正在寻找的值...我想在前端执行此操作，而无需为它被应用

您希望应用程序响应处理 res.render() & res.json()

这会引发错误那么为什么不写另一个get route

喜欢这个

router.get('/', async (req, res) => {
    const messageList = await req.app.get('messageHandler').get();
    res.render('messages', { messageList: messageList });
});

router.get('/api', async (req, res) => {
    const messageList = await req.app.get('messageHandler').get();
    res.json( messageList );
});

然后它在客户端上看起来像这样

<table>
    <% for (var i = 0; i < messageList.length; i++) { %>
        <tr id="msg-<%= i %>"><td><%= messageList[i].title %></td></tr>
    <% } %>
<table>

<script>
fetch('/api')
  .then(response => response.json())
  .then(data => console.log(data));
</script>

【讨论】：