如何在 JavaScript 中嵌入 JSTL forEach答案

【问题标题】：How to embed JSTL forEach in javascript如何在 JavaScript 中嵌入 JSTL forEach
【发布时间】：2013-07-24 18:14:08
【问题描述】：

我正在尝试使用 JavaScript 中的 JSTL forEach 标记遍历对象列表（一些测量数据），并使用 Google Charts API 显示数据。代码如下所示。但看起来有些不对劲。当我仔细检查时，测量对象列表中的数据可以很好地传递给${listOfMeasurements}、${measurements.measTime}、${measurements.measS1raw} 和${measurements.measS2raw} 中的html。但是在 javascript 块中，forEach 代码无法按预期执行data.addRow()。我的猜测是，我没有在我的 javascript 代码中正确使用 forEach，所以 data.addRow() 没有按预期执行。我该如何解决？

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('number', 'measurement1');
    data.addColumn('number', 'measurement2');
     <c:forEach items="${listOfMeasurements}" var="measurements">
        "data.addRow("
        +"${measurements.measTime}"+","
        +"${measurements.measS1raw}"+","
        +"${measurements.measS2raw}"+");"
        ;
     </c:forEach>

    var options = {
      title: 'Measurements'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);

  }
</script>

【问题讨论】：

在 for 中不带引号试试。在forEach 眼中data.addRow(...) 它已经只是一些字符串。
您需要意识到JSP 是一个HTML 代码生成器，而JS 是HTML 的一部分。在浏览器中打开 JSP 页面，右键单击并查看源代码。仔细查看 JSP 生成的 HTML/JS 代码语法。没关系？如果没有，只需相应地修复 JSP 代码，以便它准确生成所需的 HTML/JS 代码输出。如果仍然无效，请复制粘贴该 HTML 输出而不是 JSP 源代码，并在 HTML 上下文而不是 JSP 上下文中重新构建问题。
检查 HTML 源代码非常有帮助。 @BalusC，感谢您的建议。

标签： javascript jsp jstl

【解决方案1】：

这样试试

<c:forEach items="${listOfMeasurements}" var="measurements">
   data.addRow(${measurements.measTime},${measurements.measS1raw},${measurements.measS2raw});
</c:forEach>

否则你会在你的脚本中得到错误的代码，例如：

"data.addRow("+"measTimeValue-1"+","+"measS1raw-1"+","+"measS2raw-1"");";
"data.addRow("+"measTimeValue-2"+","+"measS1raw-2"+","+"measS2raw-2"");";
"data.addRow("+"measTimeValue-3"+","+"measS1raw-3"+","+"measS2raw-3"");";

...这是不正确的javascript。

混合 JSP 标记和 Javascript 的问题在于它们发生在两个不同的阶段。 JSP 渲染首先出现，所以所有的 html、css 和 javascript 代码只是另一个字符串。因此，在 JSP 渲染完成后，您就只有 HTML。

您可能想从BalusC 阅读this blog entry 来了解这个主题。

【讨论】：

抱歉，无意张贴。已编辑。
data.addRow('${measurements.measTime}',${measurements.measS1raw},${measurements. measS2raw});它的工作原理如上所示。不过，我的 Eclipse IDE 抱怨语法错误，有点奇怪。

【解决方案2】：

这可能是替代解决方案....

function drawBasic() {

        var data = google.visualization.arrayToDataTable([
            ['Date', 'measurement1','measurement2']
            <c:forEach var="measurements" items="${listOfMeasurements}">
                ,[${measurements.measTime},${measurements.measS1raw},${measurements.measS2raw}]
            </c:forEach>
        ]);         

      var options = {
        title: 'Change title Acoordingly',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Change title Acoordingly',
          minValue: 0
        },
        vAxis: {
          title: 'Change title Acoordingly'
        }
      };

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
</script>

<body><div id="chart_div"></div></body>

【讨论】：