服务端返回eventData数组在客户端显示[Object object]，如何提取指定字段展示？

问题原因 #

你当前直接输出eventData变量时显示[Object object]，是因为eventData是MongoDB聚合查询返回的数组，数组内的第一个元素才是包含统计字段的对象，直接输出对象/数组时模板引擎会默认转为[Object object]字符串。

解决方案 #

你可以任选以下两种方案之一实现需求：

方案1：直接修改前端模板代码，从数组中提取字段

在EJS模板中取出数组第一个元素的对应字段即可，建议增加空值判断避免异常：

<div class="card-body">
  <h5 class="card-title"><%= event.event_name %></h5>
  <p class="card-text"><%= event.description %></p>
  <% if(eventData && Array.isArray(eventData) && eventData.length > 0) { %>
    <p class="card-text">总受邀人数：<%= eventData[0].totalGuests %></p>
    <p class="card-text">实际出席人数：<%= eventData[0].attendedGuests %></p>
  <% } %>
</div>

方案2：服务端直接传递已计算好的变量（更简洁）

你在服务端代码中已经将两个统计值赋值给了totalGuests和attendedGuests变量，无需传递整个eventData数组给前端，修改渲染传参即可：

1. 把服务端的渲染代码：

res.render('events/show', { event, eventData });

修改为：

res.render('events/show', { event, totalGuests, attendedGuests });

2. 前端模板直接调用两个变量即可：

<div class="card-body">
  <h5 class="card-title"><%= event.event_name %></h5>
  <p class="card-text"><%= event.description %></p>
  <p class="card-text">总受邀人数：<%= totalGuests %></p>
  <p class="card-text">实际出席人数：<%= attendedGuests %></p>
</div>

内容的提问来源于stack exchange，提问作者econobro