如何在EJS中读取对象属性？Express传参访问数组报错解决

AI 小北

2026-7-3

问题描述

我有一个Express服务器，其API可获取食品项数据，希望在EJS的index文件中展示食品名称。

在server.js中我是这样获取数据的：

app.get('/', async (req, res) => {
    try {
        fetch('http://localhost:3000/api/food/all')
        .then((response) => response.text())
        .then((body) => {
            res.render('pages/home', {
                items: body
            })
        }); 
    } catch (err) {
        console.log("ERROR")
    }
})

目前这段代码能正常运行，在EJS文件中使用<%= items %>可以显示如下JSON字符串：

{"message":"All food items fetched","items":[{"_id":"658b484b34533ccab5cd809b","name":"Taco","additionals":[{"name":"Sour Cream"},{"name":"Tomato"}],"price":3.5}]}

但当我尝试访问其中items数组的第一个元素时出现错误，我的代码是：<%= items.items[0].name %>

报错信息为：Cannot read properties of undefined (reading '0')

我尝试过items.items（渲染后内容为空）、items.items.name、items.items['name']以及循环遍历等写法，均无法解决问题，每次都会提示无法读取未定义的属性，请问该如何处理？

解决方案

核心问题是你传递给EJS的items是JSON字符串，而非可直接操作的JavaScript对象，所以无法通过.或[]语法访问嵌套属性。

修复步骤：

在服务器端解析JSON为JS对象
把response.text()替换为response.json()，它会自动将接口返回的JSON数据解析成JavaScript对象：

app.get('/', async (req, res) => {
    try {
        fetch('http://localhost:3000/api/food/all')
        .then((response) => response.json()) // 替换为json()方法
        .then((data) => {
            res.render('pages/home', {
                items: data // 直接传递解析后的对象
            })
        }); 
    } catch (err) {
        console.log("ERROR", err) // 建议打印具体错误信息
    }
})

如果坚持用text()，也可以手动解析：

.then((body) => {
    const data = JSON.parse(body);
    res.render('pages/home', { items: data });
})

在EJS中正常访问属性
解析完成后，即可通过嵌套语法访问数据：
```
<%= items.items[0].name %>
```

添加容错判断（推荐）
为避免数据为空或接口异常时报错，可增加条件判断：

<% if (items.items && items.items.length > 0) { %>
    <%= items.items[0].name %>
<% } else { %>
    暂无食品数据
<% } %>

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

如何在EJS中读取对象属性？Express传参访问数组报错解决

修复步骤： #

修复步骤：