JavaScript循环中无法获取Model属性值的问题求助

你遇到的这个问题其实是JSP和JavaScript执行顺序混淆导致的典型坑，我来帮你拆解清楚原因和解决办法：

核心问题根源：服务器端与客户端代码的执行顺序差异 #

JSP的EL表达式${xxx}是服务器端先执行，生成最终的HTML/JS代码后才会发送到浏览器，由浏览器执行JavaScript。也就是说你写的${model.items[i].name}里，服务器解析时根本不认识JavaScript的变量i，会把它当成字符串处理——要么取值为空，要么因为集合期望数字索引，服务器试图把"i"转成数字时抛出数字格式异常。而你硬写0/1的时候，服务器能直接识别成数字索引，所以能正常拿到值。

两种靠谱的解决方式 #

方式一：把Model集合转成JSON字符串交给JavaScript处理 #

这是最通用的方案，把服务器端的Java集合序列化成JSON，让JavaScript直接操作这个JSON数组：

<script>
    // 用JSON工具把Model里的集合转成合法的JSON字符串（示例用FastJSON，你也可以用Jackson）
    const items = ${@com.alibaba.fastjson.JSON.toJSONString(model.items)};
    
    // 现在直接用JavaScript循环操作数组
    for(let i = 0; i < items.length; i++) {
        const strItemName = items[i].name;
        console.log(strItemName); // 正常获取属性值
    }
</script>

注意要确保JSON工具能正确处理集合里的特殊字符（比如引号），避免生成非法的JS代码。

方式二：用JSP循环提前渲染出JavaScript数组 #

如果不想引入JSON库，也可以直接在JSP里用标签循环生成JS数组：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<script>
    const itemNames = [];
    <%-- 用JSTL循环把每个item的name塞进JS数组 --%>
    <c:forEach items="${model.items}" var="item">
        itemNames.push('${fn:escapeXml(item.name)}');
        <!-- 用fn:escapeXml防止XSS攻击和字符串转义问题 -->
    </c:forEach>
    
    // 现在循环JS数组取值
    for(let i = 0; i < itemNames.length; i++) {
        const strItemName = itemNames[i];
        console.log(strItemName);
    }
</script>

为什么单引号尝试无效？ #

你之前试的${model.items['i'].name}，服务器还是会把'i'当成字符串索引去访问集合，而集合是按数字索引存储的，自然找不到对应元素，所以值为空，甚至触发类型转换异常。

额外提醒 #

永远记住：服务器端代码（JSP/EL）和客户端代码（JavaScript）是完全独立的执行阶段，不能直接在EL表达式里用JavaScript变量。所有需要在JS中使用的服务器端数据，都要先从服务器端"传递"到客户端（比如转JSON、渲染成JS变量），再用JS操作。

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