CODEWITHSUNDEEP
javascriptjspjstl
kevinlu
kevinlu

Reputation: 1911

How to embed JSTL forEach in javascript

I'm trying to loop through a list of objects (some measurements data) using JSTL forEach tag in javascript and display the data by using Google Charts API. The code is showing as following. But looks something wrong. As I double checked, the data in the list of measurements objects works fine to pass to html in ${listOfMeasurements}, ${measurements.measTime}, ${measurements.measS1raw} and ${measurements.measS2raw}. But in the javascript block, the forEach code is not working to execute data.addRow() as expected. My guess is, I'm not using forEach correctly in my javascript code, so data.addRow() was not executed as expected. How can I fix it?

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

Upvotes: 2

Views: 6005

Answers (2)

Ekas Preet Singh
Ekas Preet Singh

Reputation: 61

This could be alternate solution....

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>

Upvotes: 0

Nefreo
Nefreo

Reputation: 2182

Try it like this

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

Otherwise you will obtain wrong code in your script, for example:

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

...and that's incorrect javascript.

The problem with mixing JSP tags and Javascript is that they occur in two differents phases. JSP Rendering comes first, so all html, css and javascript code is just another string. So after the JSP Rendering finishes, you have just HTML.

You may want to read this blog entry from BalusC about this topic.

Upvotes: 2

Related Questions