Transmit information from a bean to JavaScript using JSON in JavaServer Faces

Question

Transmit information from a bean to JavaScript using JSON in JavaServer Faces

I need help transferring my arraylist from a managedBean to JavaScript code.

The bean code is shown below:

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)));
}

The JavaScript code in the xhtml page looks like this:

<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: 'Average'
            },
            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: 'Average',
                    style: {
                        color: '#89A54E'
                    }
                }
            }],

            series: [{
                name: 'Average',
                color: '#89A54E',
                type: 'spline',
                data: [// // here is my city's average which come from mybean],
                       labels: {
                        rotation: -90,
                        align: 'right',
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
            }]
        });
    });
});
//-->
</script>

This is how the body in the xhtml page is structured:

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

javascript json jsf

Answer 1

Answer №1

JSF should be viewed as a tool for generating HTML/JS code specifically in this scenario.

All you have to do is allow JSF to output the data you want in a way that conforms to valid JS syntax.

categories: #{bean.dataAsJson}

The method getDataAsJson() will return a String containing the desired JSON code. For example:

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

To confirm the outcome, simply right-click on the page in your browser and select View Source.

categories: ['foo', 'bar', 'baz']

Answer 2

JSF should be viewed as a tool for generating HTML/JS code specifically in this scenario.

All you have to do is allow JSF to output the data you want in a way that conforms to valid JS syntax.

categories: #{bean.dataAsJson}

The method getDataAsJson() will return a String containing the desired JSON code. For example:

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

To confirm the outcome, simply right-click on the page in your browser and select View Source.

categories: ['foo', 'bar', 'baz']

Answer 3

Answer №2

Transferring data to a JavaScript routine through a JSF Bean may not be the best approach, but my solution involves utilizing a Java web service or JAX-RS. The Java web service consists of two classes: JaxRsActivator and a resources class. Here is the source code for JaxRsActivator:

package service;

import javax.ws.rs.ApplicationPath;
import javax.ws.rs.core.Application;

@ApplicationPath("/rest")
public class JaxRsActivator extends Application {
}

And here is the source code for 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 getCities() {
        String cities = "{\"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 cities;
    }

}

Next, let's make a modification in our JavaScript. Transform your anonymous function for generating a chart into a named function such as generateChart(CityData) and update the line with data: to become data: CityData, The JavaScript should start like this:

$(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);
        }
    };

    // Perform the HTTP call using the specified url variable above
    xhr.open("GET", url, true);
    xhr.send();

    function generateChart(CityData) {
        // Implement your code for generating the chart
        // Update the line
        data: CityData
    }

// End of JavaScript

Also include this JavaScript at the end of your JSF page. Initiate the JavaScript with data loading after the page loads, followed by generating the chart after the data is loaded.

Success.

Answer 4

Transferring data to a JavaScript routine through a JSF Bean may not be the best approach, but my solution involves utilizing a Java web service or JAX-RS. The Java web service consists of two classes: JaxRsActivator and a resources class. Here is the source code for JaxRsActivator:

package service;

import javax.ws.rs.ApplicationPath;
import javax.ws.rs.core.Application;

@ApplicationPath("/rest")
public class JaxRsActivator extends Application {
}

And here is the source code for 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 getCities() {
        String cities = "{\"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 cities;
    }

}

Next, let's make a modification in our JavaScript. Transform your anonymous function for generating a chart into a named function such as generateChart(CityData) and update the line with data: to become data: CityData, The JavaScript should start like this:

$(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);
        }
    };

    // Perform the HTTP call using the specified url variable above
    xhr.open("GET", url, true);
    xhr.send();

    function generateChart(CityData) {
        // Implement your code for generating the chart
        // Update the line
        data: CityData
    }

// End of JavaScript

Also include this JavaScript at the end of your JSF page. Initiate the JavaScript with data loading after the page loads, followed by generating the chart after the data is loaded.

Success.

Transmit information from a bean to JavaScript using JSON in JavaServer Faces

Answer №1

Answer №2

Similar questions

Limiting the display to only a portion of the document in Monaco Editor

Trouble with triggering events from Datatable buttons

Traverse through an object in ReactJS

What is the best way to integrate JavaScript with my HTML command box?

Create a dynamic form using JSON data and the Material UI library

Utilizing JSON for configuration settings in a C# program

How can you make an Angular directive activate only after the scope function in an ng-click handler has been executed?

Is it possible to leverage both functions and variables within the ng-options expression in Angularjs?

Adjust the height in proportion to the width

How can I store the input from dynamically generated textboxes in Flutter?

Make sure to validate a form when submitting from an external source rather than through an HTML

"Is there a way to extract a specific value from an XML file based on another element

make the chosen text appear on Internet Explorer

Ways to style a div element in CSS to achieve a unique shape

How to reference a variable name within a JSON selector in AngularJS

choose checkbox option in python

The complete guide to effectively concealing double arrows within a Bootstrap 4 custom-select component

A guide on demonstrating time using the AngularJS date filter

In angular, concealing the pagination bar can be achieved when the quantity of pages is lower than the items per page count. Let's delve into

jQuery fails to hide DIVs when jQuery.show() has been utilized in a previous event