记录写MVC项目的时候遇到的第七个bug（＜c:forEach 遍历对象数组 以及弹窗代码）

今天在写项目的时候本来项用EL表达式将对象数组传入script函数 但当遍历的时候遇到了麻烦

	${order[no][0]}

如上 发现将变量作为数组下标来查找是会报错的
经过在网上不断查询 发现在EL表达式中我无法使用js变量
原因是js变量属于客户端数据 EL表达式属于是服务器端数据 只有客户端可以使用服务器端数据 而服务器端无法使用客户端数据

查询后解决方案为采用<c:forEach 遍历数组 定义一个整形来计数 达到你要寻找的下标时候停下
附上script代码
触发弹窗的函数

function showMsg(no){
            var n = parseInt(no);
            var ii = 0;

            var uuid = "";
            var businessName = new Array();
            var menuName = new Array();
            var price = new Array();
            var num = new Array();
            var finished = new Array();
            <c:forEach var="i" items="${order}">
                if (ii == n){
                    <c:forEach var="j" items="${i}">
<%--                            查询菜名和单价--%>
                            <c:forEach var="menuTemp" items="${menuss}">
                                <c:forEach var="temp" items="${menuTemp}">
                                        <c:if test="${j.menuid==temp.menuid}">
                                            if("${temp.menuname}"!=""){
                                                console.log("${temp.menuname}");
                                                console.log("${temp.price}");
                                                uuid = "${j.uuid}";
                                                menuName.push("${temp.menuname}");
                                                price.push("${temp.price}");
                                            }
                                        </c:if>
                                </c:forEach>
                            </c:forEach>
<%--                            查询店铺名--%>
                            console.log("查询店铺名");
                            console.log("${business[0].username}")
                            <c:forEach var="idTemp" items="${business}">
                                <c:if test="${j.id==idTemp.userid}">
                                    if("${idTemp.username}"!=""){
                                        console.log("idTemp.username---------------------->");
                                        console.log("${idTemp.username}");
                                        console.log("<----------------------idTemp.username");

                                        businessName.push("${idTemp.username}");
                                    }
                                </c:if>
                            </c:forEach>
<%--                            查询菜品数量和是否完成--%>
                            num.push(${j.num});
                            finished.push(${j.finished});

                            console.log(finished[0])
                    </c:forEach>
                }
                ii++;
            </c:forEach>

            var msgbody ="";
            msgbody += "<table class=\"table table-hover\">";
            msgbody += "<thead>";
            msgbody += "<tr>";
            msgbody += "<th>菜名</th>";
            msgbody += "<th>店铺名</th>";
            msgbody += "<th>单价</th>";
            msgbody += "<th>数量</th>";
            msgbody += "<th>是否完成</th>";
            msgbody += "</tr>";
            msgbody += "</thead>";
            msgbody += "<tbody>";


            for (var count = 0;count < menuName.length;count++){
                msgbody += "<tr>";
                msgbody += "<td>"+menuName[count];
                msgbody += "</td>";
                msgbody += "<td>"+businessName[count];
                msgbody += "</td>";
                msgbody += "<td>"+price[count];
                msgbody += "</td>";
                msgbody += "<td>"+num[count];
                msgbody += "</td>";
                if (finished[count]){
                    msgbody += "<td>完成</td>";
                }
                else {
                    msgbody += "<td>未完成</td>";
                }
                msgbody += "</tr>";
            }
            msgbody += "</tbody>";
            msgbody += "</table>";

            $(".msgTitle").html("订单编号: "+uuid);
            $(".msgBody").html(msgbody);
            //触发弹出窗口
            //如果要弹窗的时候弹窗界面以外的父窗口不可点击可以这么设置
            // $("#mymodal").modal({backdrop: 'static', keyboard: false});
            $("#mymodal").modal("toggle");
        }

这其中还有很多要注意的点
1.当获取出来的对象属性是字符串的时候 要在${}外面添加双引号 boolean类型不用
2.两个EL表达式获取的值如果要进行操作要写在一个${}里面 例如当我要判断order[0][0].id是否等于userId.id的时候
不能使用<c:if test="${order[0][0].id}==${userId.id}">	</c:if> 而应该写到一起变成<c:if test="${order[0][0].id==userId.id}">	</c:if>
3.<c:forEach var="i" items="${order[0]}"><//c:forEach>这样的 将一个数组用<c:forEach 遍历的时候 当你要使用order遍历出来的i值得时候要加上${}来引用
4.<c:if 和if的区别 <c:if 是预编译 当test里面的表达式出错的时候不会触发 通过test这个名字也能看出来 测试嘛

下面是弹窗代码

<%--模拟弹窗 弹出订单详细信息--%>
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title msgTitle">模态弹出窗标题</h4>
            </div>
            <div class="modal-body  msgBody">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->