I've been living in the desktop world for most of my career, so forgive me for asking such a basic question, but I'm not quite sure where to start looking.
I want to return some raw data along with my HTML, and parse and display the data using jQuery as soon as the HTML is ready. I know roughly what my js code should look like, but I'm not sure how I should embed the raw data in my HTML.
I could use $.getJSON(), but it'd be better if I could have the data right in my HTML.
I think either json or XML would work, but what's the proper way to escape/embed/parse these when they're embedded in HTML?
Thanks in advance.
You can put the JSON data in a hidden div, then decode and use from jQuery.
For example, we'll take:
{"foo":"apple","bar":"orange"}
Escape it and put in a div:
<div id="data">%7B%22foo%22%3A%22apple%22%2C%22bar%22%3A%22orange%22%7D</div>
Then from jQuery, we can use the data:
var data = jQuery.parseJSON(unescape($("#data").html()));
So calling alert(data.foo) will give us apple.
Here's a working example.
Where and when do you want this data?
If you want it in your view, just pass the data to the view
Action/Controller:
public ActionResult MyAction()
{
ViewData["MyData"] = "this is a sample data of type string";
return View();
}
And then, somewhere in your view:
<script>
var data = '<%= ViewData["MyData"] %>';
$(document).ready(){
alert(data);
}
</script>
<h1><%: ViewData["MyData"] %></h1>
Of course, if you're working with a List<string> or `string[]', you would need to format it to proper JavaScript for jQuery to understand it.
<script>
var dataArray = [
<% foreach(string s in (string[])ViewData["MyDataArray"]){ %>
<%= s %>,
<% } %>
];
</script>
It would be getter if you generated the proper JavaScript in the action instead of the view to avoid ugly markup in your view:
public ActionResult MyAction()
{
string[] myArray = new string[]{ "hello", "wolrd" };
ViewData["MyData"] = myArray;
ViewData["JavaScriptArray"] = "[" + myArray.Aggregate((current,next) => string.Format("'{0}','{1}',", current, next).TrimEnd(new char[] { ','})) + "]";
// or you can use your favorite JavaScript serialize
return View();
}
Now you can do the following in your view:
<script>
var dataArray = <%= ViewData["MyJavaScriptArray"] %>;
alert(dataArray[0]); // alerts 'hello'
</script>
Like you said it is probably best to get it via Ajax using $.post or $.get or $(element).load() etc...
But if you must save it in the page it is common to save in a hidden field. Asp.net saves things in hidden fields using binary serialization and Base64 but you can save it as a Json string and then use it in your JS.
Related
I'm working on a Node.js app (it's a game). In this case, I have some code set up such that when a person visits the index and chooses a room, he gets redirected to the proper room.
Right now, it's being done like this with Express v2.5.8:
server.get("/room/:name/:roomId, function (req, res) {
game = ~databaseLookup~
res.render("board", { gameState : game.gameState });
}
Over in board.ejs I can access the gameState manner with code like this:
<% if (gameState) { %>
<h2>I have a game state!</h2>
<% } %>
Is there a way for me to import this into my JavaScript logic? I want to be able to do something like var gs = ~import ejs gameState~ and then be able to do whatever I want with it--access its variables, print it out to console for verification. Eventually, what I want to do with this gameState is to display the board properly, and to do that I'll need to do things like access the positions of the pieces and then display them properly on the screen.
Thanks!
You could directly inject the gameState variable into javascript on the page.
<% if (gameState) { %>
<h2>I have a game state!</h2>
<script>
var clientGameState = <%= gameState %>
</script>
<% } %>
Another option might be to make an AJAX call back to the server once the page has already loaded, return the gameState JSON, and set clientGameState to the JSON response.
You may also be interested in this: How can I share code between Node.js and the browser?
I had the same problem. I needed to use the data not for just rendering the page, but in my js script. Because the page is just string when rendered, you have to turn the data in a string, then parse it again in js. In my case my data was a JSON array, so:
<script>
var test = '<%- JSON.stringify(sampleJsonData) %>'; // test is now a valid js object
</script>
Single quotes are there to not be mixed with double-quotes of stringify. Also from ejs docs:
"<%- Outputs the unescaped value into the template"
The same can be done for arrays. Just concat the array then split again.
I feel that the below logic is better and it worked for me.
Assume the variable passed to the ejs page is uid, you can have the contents of the div tag or a h tag with the variable passed. You can access the contents of the div or h tag in the script and assign it to a variable.
code sample below : (in ejs)
<script type="text/javascript">
$(document).ready(function() {
var x = $("#uid").html();
alert(x); // now JS variable 'x' has the uid that's passed from the node backend.
});
</script>
<h2 style="display:none;" id="uid"><%=uid %></h2>
In the EJS template:
ex:- testing.ejs
<html>
<!-- content -->
<script>
// stringify the data passed from router to ejs (within the EJS template only)
var parsed_data = <%- JSON.stringify(data) %>
</script>
</html>
In the Server side script:
ex: Router.js
res.render('/testing', {
data: data // any data to be passed to ejs template
});
In the linked js (or jquery) script file:
ex:- script.js
In JavaScript:
console.log(parsed_data)
In JQuery:
$(document).ready(function(){
console.log(parsed_data)
});
Note:
1. user - instead of = in <% %> tag
2. you can't declare or use data passed from router to view directly into the linked javascript or jquery script file directly.
3. declare the <% %> in the EJS template only and use it any linked script file.
I'm not sure but I've found it to be the best practice to use passed data from router to view in a script file or script tag.
This works for me.
// bar chart data
var label = '<%- JSON.stringify(bowlers) %>';
var dataset = '<%- JSON.stringify(data) %>';
var barData = {
labels: JSON.parse(label),
datasets: JSON.parse(dataset)
}
You can assign backend js to front end ejs by making the backend js as a string.
<script>
var testVar = '<%= backEnd_Var%>';
</script>
This should work
res.render("board", { gameState : game.gameState });
in frontend js
const gameState = '<%- JSON.stringify(gameState) %>'
Well, in this case you can simply use input text to get data. It is easy and tested when you use it in firebase.
<input type="text" id="getID" style="display: none" value="<%=id%>">
I know this was answered a long time ago but thought I would add to it since I ran into a similar issue that required a different solution.
Essentially I was trying to access an EJS variable that was an array of JSON objects through javascript logic like so:
<script>
// obj is the ejs variable that contains JSON objects from the backend
var data = '<%= obj %>';
</script>
When I would then try and use forEach() on data I would get errors, which was because '<%= obj %>' provides a string, not an object.
To solve this:
<script>
var data = <%- obj %>;
</script>
After removing the string wrapping and changing to <%- (so as to not escape html going to the buffer) I could access the object and loop through it using forEach()
Suppose you are sending user data from the node server.
app.get("/home",isLoggedIn,(req,res)=>{
res.locals.pageTitle="Home"
res.locals.user=req.user
res.render("home.ejs");
})
And now you can use the 'user' variable in the ejs template. But to use the same value using client-side javascipt. You will have to pass the data to a variable in the tag.
Passing ejs variable to client-side variable:
<script>
let user= '<%- JSON.stringify(user) %>';
</script>
<script>home.js</script>
Now you can access the user variable at home.js
I am sending a filepath ( string) from controller to html page through ViewData and I want to access that string in my javascript, consume it, run some algo in javascript and then use results to consume them and make some graphs on the same html page.
HTML
</head>
<body>
<div id="mychart"></div>
<script>
var path=#ViewData["path"];
//some javascript logic with the string path of the file.
//using results for output chart of id 'mychart'
</script>
</body>
</html>
Controller Action Code:
public IActionResult CellResult(string outputpath)
{
ViewData["path"] = outputPath;
return View();
}
Since it is a string value, you need to wrap it in either single quotes or double quotes.
var path='#ViewData["path"]';
alert(path);
EDIT : As per the comment
How can I send a list of string from controller to html page and use
it in javascript? instead of string i wanna send a list of string
If you want to send a list of string, it is the same, but since it is a complex type now, you need to use the json serializer to convert this object to a string.
So in your server
var list = new List<string> {"Hi", "Hello"};
ViewBag.MyList = list;
and in the view
<script>
var list = #Html.Raw(JsonConvert.SerializeObject(ViewBag.MyList));
console.log(list);
</script>
I have the following situation.
I want to show a (donut) graph with data in my web page.
I'm getting the data from my database in my backend of my webpage (ASP.NET/C#).
I'm using a standalone javascript file ('graph.js') for the graph:
//Donut Chart
var donut = new Morris.Donut({
element: 'sales-chart',
resize: true,
colors: ["#3c8dbc", "#f56954", "#00a65a"],
data: [
{ label: "**DATA**", value: **10** },
{label: "**DATA**", value: **30**},
{label: "**DATA**", value: **20**}
],
hideHover: 'auto'
});
Is there a good way of putting the data in the javascript file? (Changing the DATA variables)
I know it's possible to put the javascript in script elements on my aspx page, and getting my data there:
var DataNumber = <%=DataNumber%>;
And giving this data in the backend:
private String _dataNumber = String.Empty;
protected string DataNumber {
get {
return this._dataNumber ;
}
set {
this._dataNumber = value;
}
}
but that's not what i'm looking for.
I realy want to use an standalone file for this.
I'm more into cshtml files, but you could render a serialized list containing your variables, in an hidden div in your ASPX file :
<div class="hidden" id="myData" data-data="<%= JsonConvert.SerializeObject(myData)%>"></div>
Then, you could get this data from within your javascript code:
$(function() {
var data = $("#myData").data('data');
var donut = new Morris.Donut( /* do something with data */);
})
I'm using newtonsoft JSON.NET to serialize, and JQuery to parse json data.
Another solution is to make an Ajax call to fetch your data.
Edit:
Here is an example with something similar I've done in ASP.NET:
File donut.aspx.cs:
// ...
protected void Page_Load(object sender, EventArgs e)
{
// edit the following line to suit your needs
var list = new List<Data>(your_data_as_list);
donut.Attributes.Add("data-donut", list)
}
// ...
File donut.aspx:
<script type="text/javascript" src="lib/morris.js"></script>
<!-- create a component that will be managed by C#
<div runat="server" id="donut"></div>
<!-- this will execute once the page is loaded -->
<script type="text/javascript">
jQuery(function () {
// use <%= donut.ClientID %> to get the generated Id from ASP.NET
var donutData= $("#<%= donut.ClientID %>").data("donut");
var donut = new Morris.Donut( /* do something with donutData*/);
});
</script>
Sure. Assuming that you don't want to retrieve data later after page is loaded using ajax, you can put your data in global object with you razor syntax, before your standalone script is executed like this:
window.mydata = <%=DataNumber%>;
Just keep number of global objects to a minimum. Use single root for all globals. Like this:
window.myGlobals.mydata = <%=DataNumber%>;
And later access it from wherever you want.
If you want to avoid globals completely, there is several ways you could do that, but all of them include rendering you data to your page.
For example, you could put data attributes in your script tag.
<script type="text/javascript" data-mydata="<%=DataNumber%>" src="mymodule"></script>
And in script, just access it trough $(document.currentScript).data("mydata)...
But, beware that you don't loose it during bundling process...
I want to pass data from controller to javascript by embedded data directly in view. (So there won't be additional requests.)
My first solution is to use as JSON in GSP like this:
<script>
var data = ${invoice as JSON};
</script>
I don't think it's good idea since I have to use (Grails 2.2)
grails.views.default.codec = "none"
or (Grails 2.3)
grails {
views {
gsp {
codecs {
expression = 'none'
}
}
}
}
Now, I found that I can create little taglib like this:
def json = { attrs, body ->
out << (attrs.model as JSON)
}
And I can use following code in GSP:
<script>
var data = <g:json model="${invoice}" />;
</script>
Now, the question. Is using taglib is best practice? If not, please give me the best solution.
Transforming the comment in answer. You can create your JSON String in the controller and pass it to the view. Grails 2.3.x have the raw codec that don't encode your content. More info about this codec here.
Example:
class MyController {
def index() {
String invoiceString = invoice as JSON
[json: invoiceString]
}
}
index.gsp
<script>
var data = ${raw(json)};
</script>
using grails 2.4.4.
Above answer did not worked for me.
so adding what worked for me.
Source:
http://aruizca.com/how-to-render-json-properly-without-escaping-quotes-inside-a-gsp-script-tag/
<g:applyCodec encodeAs="none">
var data = ${data};
</g:applyCodec>
Now, I'm upgrading to Grails 3.2.4. I found that Sérgio Michels' method is still work. Just make sure jsonString is a String object.
<script>
var data = ${raw(jsonString)};
</script>
If it is not a String object, you can use something like following code.
<script>
var data = ${raw(mapInstance.encodeAsJSON().toString)};
</script>
I have the following Action method.
public ActionResult Action()
{
var model = new SampleViewModel();
model.JsonString = ReadJsonStringFromSomewhere();
return ViewResult(model);
}
In my view I have the following method to initialize a javascript variable.
<script type="text/javascript">
var jsObject = eval("(" + <%= Model.JsonString %> + ")");
alert(jsObject);
</script>
The 'jsObject' I get is undefined. What is wrong here. Also is it the best method to initialize a javascript variable with a complex json string?
JSON is literal JavaScript. You don't need the eval at all. The following will work:
<script type="text/javascript">
var jsObject = <%= Model.JsonString %>;
alert(jsObject);
</script>
That said, your eval version should still work, albeit more slowly. You don't show your JSON, but it might not be valid.
try this
<script type="text/javascript">
var jsObject = '<%= Model.JsonString %>';
alert(jsObject);
I think that looking at the rendered HTML and FireBug could be your best friend. The code snippet provided by Craig Stuntz looks good, so if it's not working, I would think that the emitted JSON has something wrong with it.