What is the best way to transfer a map from Java to JavaScript?

Question

What is the best way to transfer a map from Java to JavaScript?

I have a dropdown menu with an information tooltip icon next to it. When the user changes the selection in the dropdown and hovers over the info icon, a description for the selected item should appear as shown in the image:

https://i.sstatic.net/K1S64.jpg

Currently, I have a backend map of values where the key is the dropdown value and the value is the corresponding description. I want this map to be accessible in the frontend (JavaScript). There are several options available:

1- Make an AJAX call on each value change (inefficient due to unnecessary calls to the backend)

2- Pass the map as a JSON object to a hidden HTML element and retrieve it from there (complicated by escaping characters in JSON)

3- Use data attributes, but my framework does not support HTML5

4- Fetch the JSON via AJAX after page load and store it in a JavaScript variable (wasteful use of server resources)

5- Create a global variable in my JSP using declaration tags (not thread-safe and involves scriplets)

I opted for the fifth solution since the map is static and concurrency is not a major issue. Additionally, the framework I'm working with heavily relies on scriplets.

Does anyone have any other recommendations based on the solutions mentioned, or possibly offer alternative solutions?

javascript java json ajax jsp

Answer 1

Answer №1

One way to handle this issue is by passing the map as a JSON object to a hidden HTML element and then retrieving it, although dealing with the escaping of quotes and other characters in JSON can be problematic.

To simplify this process, you can utilize JSON.stringify() and JSON.parse().

I recommend using this method - stringify the JSON object, place it in an element, and then parse the data when needed.

var obj = {foo: 'bar', arr: ['baz','foobar']};

var el = document.getElementById('jsonData');

// Set the value here -- this would typically be done in your JSP template
el.setAttribute('data-json', JSON.stringify(obj));

console.log(JSON.parse(el.getAttribute('data-json')));

<div style="display:none" id="jsonData"></div>

Answer 2

One way to handle this issue is by passing the map as a JSON object to a hidden HTML element and then retrieving it, although dealing with the escaping of quotes and other characters in JSON can be problematic.

To simplify this process, you can utilize JSON.stringify() and JSON.parse().

I recommend using this method - stringify the JSON object, place it in an element, and then parse the data when needed.

var obj = {foo: 'bar', arr: ['baz','foobar']};

var el = document.getElementById('jsonData');

// Set the value here -- this would typically be done in your JSP template
el.setAttribute('data-json', JSON.stringify(obj));

console.log(JSON.parse(el.getAttribute('data-json')));

<div style="display:none" id="jsonData"></div>

Answer 3

Answer №2

Here is my strategy.

Create duplicate DOM elements for each choice, initially kept hidden.
Upon triggering the Onchange event of the select box or hovering over the tooltip icon, process the message and reveal it.

When dealing with a JSP loop, you have two options to consider: leveraging the value and index of the select box.

1. Utilize the value field of the combobox (dropdown list/HTML select) as: ${c.id}

2. Use the loop index as: ${cStatus.index}

<c:forEach items="${somethingList}" var="c" varStatus="cStatus">        
    <input type="hidden" id="hiddenToolTip${${cStatus.index}" value="you have selected XXX. XXX is blah blah blah">
 </c:forEach>

Subsequently, in the mouseover event of the tooltip function:

You can retrieve the currently selected option's index or value, fetch the corresponding data from the hidden field, and display the tooltip.

var tooltipText=document.getElementById("hiddenToolTip"+ document.getElementById("comboBoxId").value ).value;
alert("here is tooltip text="+tooltipText);

Answer 4

Here is my strategy.

Create duplicate DOM elements for each choice, initially kept hidden.
Upon triggering the Onchange event of the select box or hovering over the tooltip icon, process the message and reveal it.

When dealing with a JSP loop, you have two options to consider: leveraging the value and index of the select box.

1. Utilize the value field of the combobox (dropdown list/HTML select) as: ${c.id}

2. Use the loop index as: ${cStatus.index}

<c:forEach items="${somethingList}" var="c" varStatus="cStatus">        
    <input type="hidden" id="hiddenToolTip${${cStatus.index}" value="you have selected XXX. XXX is blah blah blah">
 </c:forEach>

Subsequently, in the mouseover event of the tooltip function:

You can retrieve the currently selected option's index or value, fetch the corresponding data from the hidden field, and display the tooltip.

var tooltipText=document.getElementById("hiddenToolTip"+ document.getElementById("comboBoxId").value ).value;
alert("here is tooltip text="+tooltipText);

What is the best way to transfer a map from Java to JavaScript?

Answer №1

Answer №2

Similar questions

Contrasting actions when submission occurs by pressing ENTER versus clicking the submit button

The length of a JSON array is consistently one in AJAX with Codeigniter 4

Having difficulty entering a date with sendKeys in Selenium WebDriver

The "checked" property is absent in the ASP.NET checkbox within the gridview

Obtain the onchange event trigger following a change in select's value using JavaScript

Can you explain the purpose of "screenSize" attribute in the Android Manifest file?

The jQuery spoiler functionality is rather basic and only partly functional

Navigate to a specific location on the webpage without modifying the current URL

Attempting to prevent the insertion of duplicate values more than once

Obtaining repository data using JGit

Decision on how to exchange data (JSON or traditional method)

An issue arose while trying to create typed transformations from JSON data using a case class

The slideToggle function in jQuery seems to have trouble working on a Joomla platform, however, it functions perfectly on jsbin

WordPress is failing to deliver a response from AJAX

Is it possible to validate input only during insertion in Objectionjs without validation during updates?

The Philosophy Behind Structuring Node.js Modules

"Extracting key-value pairs from an observable in Angular 2: A step-by-step

Registering dynamic modules within a nested module structure - Vuex

Accessing a JSON file over a network using JavaScript

Encountering an issue while attempting to test geolocation functionality in the web browser