I'm developing a shortned url project . And I would use a javascript function to display a pie diagram .
I want to know if it's possible to pass a list of Javabean (jst , jsp ) to a javascript function ( array , table..) ?
One efficient way to achieve this is to create a JSON structure on server side and pass it on to the client side. I suppose your chart data will be in an array or tabular format.
There are various JSON libraries available like Jackson. Refer to Jackson example.
Once you have constructed appropriate JSON object on Server side, you can refer to it on JSP by assigning the value in one line call.
<script type="text/javascript">
var jsonObj = '<c:out value="${jsonObject}"/>';
// you can refer to jsonObj in rest of the script
// including external JavaScript file
</script>
In above example jsonObject is constructed on server side in Servlet or controller etc.
Related
I've a web page in which i've inserted a ACE- javascript Code Editor. I want to post javascript code into my database and then retrieve.
for example in case of JSON we use json.stringify and json.parse to post and retrieve data. I'm usieng SAPUI5 backend is in javascript.
var conf = model.getProperty("/automation-rule-body");
Is there any rule to post javascript code into database ?
If your backend supports REST API use create method of sap.ui.model.odata.ODataModel
var oDataModel = sap.ui.model.odata.ODataModel(sServiceUrl, mParameters);
oDataModel.create(sPath, oData, mParameters);
I have a model as List<Collaborateur> coming from my Controller Action to my JSP. And I have the following function in JQuery/Javascript:
function showCollaborateurEmail(index) {
alert("${collaborateurs[1].email}"); // Works
alert("${collaborateurs[2].email}"); // Works
//....
alert("${collaborateurs[index].email}"); // Not working
}
So I want to show the email of my Collaborateur model dynamically by calling the function showCollaborateurEmail(index).
Thank you for your help!
The problem that you face is the exchange of data between code on server side and code on client side. There are multiple ways to achieve your goal. You can...
store the list-elements in a hidden form-field (escaping of delimiter might be a challenge) or
generate javascript - code on server side in JSP that creates a javascript array with the list-elements or
use ajax.
1 and 2 are rather ad hoc - solutions for a small problem. 3 is rather a bigger solution (depending on your technical environment) which additionally provides the possibility to avoid page reloads.
Two approaches to explore:
1) generate a javascript array with all the elements of the list, and access the at will on the client side (javascript)
2) access the "collaborateurs" via an ajax request
I would not recommend to mix server and client code like this through jsp.
Instead you should create a servlet and call what you need with ajax.
If you want to use a dirty/quick trick I think you can build back the array from the server side to the client side inside a <script> tag
For example:
<script>
var emailArray = [
<%for (int i = 0; i > collaborateurs.length; i++){ %>
"<%=collaborateurs[i].email %>"
<%
if(i < collaborateurs.length - 1){
%>, <%
}
}%>
];
</script>
(I wrote this by hand so I'm not sure the syntax is correct, but I hope you got the idea)
One more option you will have is converting your List object to json and then set it to a variable in jsp while compiling phase and the on client side parse json and make an object and iterate over it. This way you can access your list even after loading your page also.
You can use API like gson,Jackson etc.
Example :-
List<Object> list1=new ArrayList<>();
// Add values to list here
JSONArray obj=new JSONArray(list1);
In JSP :
var collaborateursList=${collaborateurs};
function showCollaborateurEmail(index) {
alert(collaborateursList[1].email);
alert(collaborateursList[2].email);
alert("collaborateursList[index].email);
}
Please verify the index is passing correctly to the function and try using this
alert("${collaborateurs[" + index + "].email}");
I am sending my HTML file to the client in node.js as shown below
app.get('/get', function(req, res) {
res.render(index.html);
});
Here, index.html refers to a json file.
How can I send both together or refer the json file in the client?
If you don't want to request the JSON file from the client as an independent HTTP request you can do one of the following:
Full server side rendering:
Use a template technology like moustache or handlebars, and try to render that data inline with the response. For example if you your JSON file returns a name and an address the index.html could look like:
<div>
<span>Name: {{name}} </span>
<address>Address: {{address}} </span>
<div>
Then when rendering you could pass a js object with properties name and address to the template and you wouldn't need to ask for the JSON file separately. This example follows moustache guidelines just in case I wasn't explicit enough.
Inline object
A bit like the previous solution but less elegant, you can add the full JSON response as an object with within a script tag, and then use it however you see fit. Try to append a block to he HEAD of index.html like this:
<script>
var myObject = <contents of your JSON object>
</script>
The other possible solution was just described in another answer.
I hope this helps.
HTTP only sends one resource at a time. If your page is requesting a JSON file, it needs to be served as a second request.
Alternatively, you can render HTML with a <script> block that has a variable assignment with your JSON-encoded data as a value.
You can't send two types of files back in a single request, but you could either do an ajax call in the html to get the json you need:
<script type="text/javascript">
var json_data;
$.getJSON("URL_HERE", function(data) { json_data = data; });
</script>
or add the json to the html as a javascript object via a template engine (jade shown below):
script(type="text/javascript").
var json_data = #{ JSON.stringify(JSON_OBJECT_HERE) }
I'm making a 2D, top-down Zelda-style web single player rpg...
I'd like to store dialog in JSON format...
Currently I'm getting the json as an external javascript file. The json is stored as such in js/json.js:
function getJson() {
var json = {
"people" :
[
{//NPC 1 - rescue dog
etc...
Then I use it in my main game javascript file as such <script src="js/json.js"></script>..`
var json = getJson();
Then use it as such:
Labels[index].text = json.people[index].dialogs.start.texts[0];
Does it matter if I keep the json as a js file in a javascript function? Or should it be stored as a .txt file then parsed?
Thanks!
It does not matter but JSON data is also JavaScript so store it as .js and later on you can add more data related functions to it if needed, btw your data file already has a getJSON function so it doesn't make sense to store it as .txt
On the other hand if an API is serving this data it need not have any extension at all.
It's better off storing the data in pure JSON format and retrieving it via jQuery.getJSON() or an XMLHttpRequest, if you're using vanilla JavaScript. Otherwise, it looks like you're adding getJson() to the global scope, which may result in a conflict if you have another getJson() defined elsewhere.
So you could have a dialog.json that looks almost the same as what you have now, just without the unnecessary getJson() function:
{
"people" :
[
{//NPC 1 - rescue dog
...
}
]
}
If you choose to use jQuery:
var dialog;
$.getJSON('json/dialog.json', function(data) {
dialog = data;
// Asynchronous success callback.
// Now dialog contains the parsed contents of dialog.json.
startGame();
});
Keeps your data separate from your logic.
I have a JSP page and I need to use my JSTL parameter in my javascript function.
I know how to pass JSTL to javascript but I want to do it by using the third .js file because my String parameter is a big string and It's so weired to show it hardcoded in JSP page
Suppose ${data} is my data and I want to use it in javascript function which is inside my main JSP file, like this:
function x(){
....
doSomeTask(myData);
}
which I want this myData come from another javascript somewhere which does have body like this:
var myData = ${data}; //this is a different js file, lets say for example alldata.js
however this solution won't work as I tested it out !
how can I keep my data separate & call it from my jsp when I'm passing ${data} to that js variable ?
You can create object like messageMap in jsp. And create key in this object assign value ${data}.
In your jsp:
messageMap = messageMap || {}
messageMap.Key = ${data}
In your javascript file can get the element and append it content to that element:
$('.element').html(messageMap.Key)