Geek Answers Handbook

Send data from bean to javascript using json in jsf

I want to send my arraylist from managedBean to javascript code,

my bean is here:

public void getDataAsJson(){ String [] dizi={"Tokyo","Jakarta","New York","Seoul", "Manila","Mumbai","Sao Paulo","Mexico City", "Dehli","Osaka","Cairo","Kolkata", "Los Angeles","Shanghai","Moscow","Beijing", "Buenos Aires","Guangzhou","Shenzhen","Istanbul"}; Random rnd =new Random(); JSONObject obj= new JSONObject(); for (int i = 0; i < dizi.length; i++) obj.put(dizi[i], new Integer(rnd.nextInt(80))); }

my javascript code is here on the xhtml page:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', zoomType: 'xy' }, title: { text: 'avarage' }, subtitle: { text: '' }, xAxis: [{ gridLineWidth: 0.5, categories: [// here is my city names which come from mybean] }], yAxis: [{ // Primary yAxis labels: { formatter: function() { return this.value; }, style: { color: '#89A54E' } }, title: { text: 'avarage', style: { color: '#89A54E' } } }], series: [{ name: 'avarage', color: '#89A54E', type: 'spline', data: [// // here is my city avarage which come from mybean], labels: { rotation: -90, align: 'right', style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }] }); }); }); //--> </script>

here is my body on the xhtml page:

 <body> <script src="http://code.highcharts.com/highcharts.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body>
+4
source share
2 answers

You need to understand that JSF in the context of this question is simply an HTML / JS code generator.

You just need to let JSF print the data you need so that it appears in syntactically correct JS code.

 categories: #{bean.dataAsJson}

Here getDataAsJson() returns a String representing the desired JSON code. For instance. mostly:

 public String getDataAsJson() { return "['foo', 'bar', 'baz']"; }

To check the result, click the right page in the browser and view the source.

 categories: ['foo', 'bar', 'baz']
+8
source

Sending data to a javascript routine via JSF Bean is not a good idea, but my solution works with java or JAX-RS web service. The Java web service contains 2 classes, a JaxRsActivator and a resource class. Here is the source code of the JaxRsActivator:

 package service; import javax.ws.rs.ApplicationPath; import javax.ws.rs.core.Application; @ApplicationPath("/rest") public class JaxRsActivator extends Application { }

Here is the source code of the resource class.

 package service; import static javax.ws.rs.core.MediaType.TEXT_PLAIN; import javax.ws.rs.GET; import javax.ws.rs.Path; import javax.ws.rs.Produces; @Path("/resource") @Produces(TEXT_PLAIN) public class resource { @GET @Path("cities") public String dizi() { String s = "{\"Tokyo\",\"Jakarta\",\"New York\",\"Seoul\",\r\n" + "\"Manila\",\"Mumbai\",\"Sao Paulo\",\"Mexico City\",\r\n" + "\"Dehli\",\"Osaka\",\"Cairo\",\"Kolkata\",\r\n" + "\"Los Angeles\",\"Shanghai\",\"Moscow\",\"Beijing\",\r\n" + "\"Buenos Aires\",\"Guangzhou\",\"Shenzhen\",\"Istanbul\"};\r\n"; return s; }

}

Now a modification in our JavaScript. Make your anonymous function for creating a chart a named function, for example: generateChart (CityData) and change the line with the data: becomes data: CityData, your JavaScript starts with:

 $(function () { var xhr = new XMLHttpRequest(); // replace the dots var url = "http://localhost:8080/........../resource/cities"; xhr.onreadystatechange = function() { // Check if fetch request is done if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); // Parse the JSON string var jsonData = eval(xhr.responseText); generateChart(jsonData); } }; // Do the HTTP call using the url variable we specified above xhr.open("GET", url, true); xhr.send(); function generateChart(CityData) { // put your code for generating your chart // modify line data: CityData }

// End JavaScript

Also put this JavaScript at the end of your JSF page. After loading the page, start JavaScript with data loading, and after loading the data, start generating the chart.

Sucches.

0
source

More articles:


All Articles