How use database in Javascript and JSF?

问题

I'm trying to follow the @BalusC advice here. (I'm writing here now because it's unrelated with previous question).

So I need to get data from my database and show in chart using JavaScript, this is an example. I'm just doing this sample so I can understand how to show some data from the server side to the client side.

My bean:

@ManagedBean(name="reportc")
@ViewScoped
public class ReportControl implements Serializable {
    private static final long serialVersionUID = 3269125738504434502L;

    private String[] dataAsJson = {"1.3", "2.1", "1.3", "2.2", "1.4", "2.7", "1.5", "2.1", "1.6", "2.4", "1.9", "2.1"};

    public String getDataAsJson() {
        Gson gson = new Gson();
        return  gson.toJson(dataAsJson);
    }
}

To help understand the spline-plot-bands.js file.

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    ...

    <h:head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript>
        <h:outputScript name="javascript/highchart/spline-plot-bands.js" />
    </h:head>
    <h:body>

    <h:outputScript name="javascript/highchart/highcharts.js" />
    <h:outputScript name="javascript/highchart/modules/exporting.js" />

    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

    </h:body>
</html>

As you can see in the spline-plot-bands.js file.

All that matters for me is this part (I guess):

series: [{
  name: 'Hestavollane',
  data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
         7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
         8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
         7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
         3.0, 3.0]

  }, {
  name: 'Voll',
  data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
         0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
         0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
         3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
  }]

How could I send something like this from my server side to this javascript ?

I think I'm close to find out how to use gson, javascript with jsf, but I still don't get it how to finish this. Could someone help me with this ?

回答1:

The JS expects a double[], but you're feeding a String[]. Fix it accordingly:

private double[] hestavollane = {
     4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
     7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
     8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
     7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
     3.0, 3.0
};

private double[] voll = {
     0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
     0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
     0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
     3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4
};

public String getDataAsJson() {
    Map<String, Object> data = new HashMap<String, Object>();
    data.put("hestavollane", hestavollane);
    data.put("voll", voll);
    return new Gson().toJson(data);
}

And edit your spline-plot-bands.js file to use it instead of the hardcoded values:

series: [{
    name: 'Hestavollane',
    data: data.hestavollane
}, {
    name: 'Voll',
    data: data.voll
}]

回答2:

The key part of the linked article that you need is this:

<h:outputScript>var data = ${reportc.dataAsJson};</h:outputScript>

来源：https://stackoverflow.com/questions/9575009/how-use-database-in-javascript-and-jsf

标签

javascript

database

json

jsf

gson