如何在javascript中嵌入JSTL forEach

我試圖在JavaScript中使用JSTL forEach標記遍歷對象列表（某些測量數據），並使用Google Charts API顯示數據。代碼顯示如下。但看起來有點不對勁。正如我仔細檢查，測量對象列表中的數據工作正常，傳遞到HTML ${listOfMeasurements},${measurements.measTime},${measurements.measS1raw}和${measurements.measS2raw}。但在JavaScript塊中，forEach代碼無法按預期執行data.addRow()。我的猜測是，我沒有在我的JavaScript代碼中正確使用forEach，所以data.addRow()未按預期執行。我該如何解決它？如何在javascript中嵌入JSTL forEach

<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>

來源

2013-07-24 kevinlu

嘗試沒有對裏面的報價。在'forEach'眼中'data.addRow（...）'它已經只是一些字符串。 – Nefreo

您需要認識到JSP是HTML代碼生成器，JS是HTML的一部分。在瀏覽器中打開JSP頁面，右鍵單擊並查看源代碼*。仔細觀察JSP生成的HTML/JS代碼語法。沒關係？如果不是，只需修復JSP代碼，以便它生成所需的HTML/JS代碼輸出。如果仍然徒勞無功，請複製HTML輸出而不是JSP源代碼，並在HTML上下文中重新構建問題而不是JSP上下文。 – BalusC

檢查HTML源代碼非常有幫助。 @BalusC，感謝您的建議。 – kevinlu

嘗試像這樣

<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關於此主題。

來源

2013-07-24 18:22:30 Nefreo

您解決了這個問題，但「嘗試」解決方案是錯誤的。 – BalusC

對不起，張貼不想。編輯。 – Nefreo

data.addRow（'$ {measurements.measTime}'，$ {measurements.measS1raw}，$ {measurements.measS2raw}）;它的工作原理如上所示。我的Eclipse IDE抱怨語法錯誤，雖然有點奇怪。 – kevinlu

這可能是另一種解決方案....

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>

來源

2016-10-16 13:29:47

如何在javascript中嵌入JSTL forEach

回答

相關問題