What are the best practices for utilizing databases with both Javascript and JSF frameworks?

I am currently following the recommendations provided by @BalusC, with additional guidance available here. (The reason I'm posting this here is because it's not related to my previous question).

My goal is to retrieve data from my database and display it in a chart using JavaScript; an example of this can be seen here. I am working on this prototype to gain an understanding of how to transfer data from the server side to the client side.

This is a snippet of 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);
    }
}

A useful resource for understanding 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>

In the spline-plot-bands.js file, pay attention to this section:

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

I am seeking advice on how to transmit similar data from the server side to this JavaScript. Although I have made progress in utilizing Gson, JavaScript with JSF, there are still some aspects that elude me. Any assistance would be greatly appreciated.

Answer №1

The JavaScript code is expecting an input of type double[], but you are providing a String[]. Please correct this by updating the input data type:

private double[] hestavollane = {
     // Values here...
};

private double[] voll = {
     // Values here...
};

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

Also, make changes to your spline-plot-bands.js file to dynamically use the data provided instead of hardcoded values:

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

Answer №2

Essential information from the article you referenced is:

<h:outputScript>let info = ${reportc.extractedData};</h:outputScript>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with parsing JSON data in JQuery getJson callback

Recently, I've encountered a strange issue with using jQuery for JSON. Even though the server is responding correctly to the request, I'm having trouble extracting the data from the JSON response. The server is ASP.MVC and is serializing using J ...

Is it feasible to import Akeneo product variants data?

I am currently working with Akeneo's Product Information Management (PIM) system and I am in the process of importing information for my products. Specifically, I am focusing on enhancing a unique perfume product model which includes a variant called ...

What is the best way to retrieve a value from a function that contains multiple nested functions in Javascript?

The issue at hand is my struggle to extract a value from a nested method and utilize it outside of its parent method. I am aiming for the output of "console.log(someObjects[i].valueChecker);" to display either "true" or "false," but instead, it simply retu ...

The browser message states: Variable $? Not Found

As a newcomer to javascript (jquery/json), I've created code to display a chart using CanvasJS with a php/json data fetching script. However, I'm facing an issue where the chart is not rendering when I integrate my code. Upon inspecting the brows ...

Dragging a div element within a table

I am working on an HTML code where I need to make the colored divs draggable and fit them into specific table cells. The green div should occupy 2 cell spaces, light blue 3 cell spaces, yellow 4 cell spaces, and dark blue 5 cell spaces. While I have the d ...

Adding a clickable button to execute code within a LeafletJS marker!

I'm currently experimenting with adding a button inside a pointer that will log a message to the console. This is simply a test to see if I can execute a method on the marker, but so far I haven't been able to display any text. const marker = L.m ...

Clicking a button in React requires two clicks to update a boolean state by triggering the onClick event

I have a React functional component with input fields, a button, and a tooltip. The tooltip is initially disabled and should only be enabled and visible when the button is clicked and the input fields contain invalid values. The issue I'm facing is t ...

Optimal method for detecting changes in a React webpage

As I create React hook components that utilize Material-UI input controls, I have searched extensively but have not found a satisfactory example. My goal is to display a popup message to the user if they have made changes to an input field, checkbox, rad ...

The HTML required attribute seems to be ineffective when using AJAX for form submission

Having trouble with HTML required attribute when using AJAX submission I have set the input field in a model Form to require attribute, but it doesn't seem to work with ajax. <div class="modal fade hide" id="ajax-book-model" a ...

Tips for transmitting one or multiple data using jquery.ajax

I found this code on stackoverflow and it is working well for uploading multiple files. However, I am facing an issue where I cannot send additional parameters along with the file upload. Despite trying various methods, I have been unsuccessful in sending ...

Can default query parameters be predefined for a resource in AngularJS?

When working with a simple resource like the one defined below, it is possible to utilize the Receipt.query() method to retrieve a collection from the server. In addition, by calling Receipt.query({freightBill: 123}), a query parameter such as freightBill ...

The Mongoose model is having issues being imported into a different Component

Attempting to utilize my model for displaying and locating users in MongoDB has hit a snag. Upon importing it into profile.js and launching my app, an error is thrown: Cannot read properties of undefined (reading 'Users') https://i.stack.imgur.c ...

Issue with capturing mouse position in canvas when hovering over <h1> element above it

I am working on a project using React Three Fiber to animate a 3D model that follows the mouse cursor. However, I have noticed that when the mouse hovers over some divs or headings on top of the canvas element, the animation freezes and becomes choppy unti ...

How can I pass a dynamic scope variable to a JavaScript function in AngularJS that is being updated within an ng-repeat loop?

In my HTML, I have an ng-repeat loop where a variable is displayed in table rows. I want the user to be able to click on a value and pass it to a JavaScript function for further action. The code snippet below showcases my earlier version which successful ...

Need help tracking down errors in the json data received from recaptcha response?

I am currently using recaptcha in conjunction with ajax, and all the data that is being posted is functioning normally. However, I seem to be encountering an issue when it comes to decoding the response into json format. Upon trying to display the recapt ...

Determining the position of p5.js input in relation to the canvas

Show me what you’ve got: function initialize() { var board = createCanvas(960,540); board.parent("drawingPad"); background('white'); var textbox = createInput(); textbox.position(10,10); textbox.parent("drawingPad"); } I’ve cre ...

Ways to implement distinct values for model and input field in Angular 5

I'm currently working on an Angular 5 application and I have a requirement to format an input field with thousand separators (spaces). However, the model I am using only allows numbers without spaces. Since my application is already fully developed, ...

Converting CommonJS default exports into named exports / Unable to load ES module

I've encountered an issue while creating a Discord bot with discord.js using TypeScript. When attempting to run the resulting JavaScript code, I'm facing an error that states: import { Client, FriendlyError, SQLiteProvider } from 'discord.js ...

Issue with AJAX POST method failing to upload the file

I'm having trouble incorporating file upload support into my AJAX post function. Can anyone provide some guidance on what I might be missing? function ajax_post(url, param) { if (url.substr(0, 11) == 'javascript:') { result = &ap ...

Tips for retrieving unique records in Linq without duplicates

Hey, I need some help! I have a list of promotion codes and I want to retrieve only the ones that don't have duplicates. For example, from the JSON data below, I want to extract Promotion code A123 and B500 and store them in a separate list. [ { ...