I'm building an AJAJ (AJAX with JSON) webapp with jQuery and I'd like my users to be able to bookmark a page that saves all of their setting selections for a certain part of the app. I've got quite a bit of data that needs to be saved, so I thought JSON might be the best way to save this, putting it into the location.hash.
That being said, what's the best way to get the string of data from the location.hash and convert it back to a JSON object so that it's usable inside the Javascript?
Here's what I'm thinking as far as the JSON object
http://example.com/index.html#json={'s': '2010-02-19', 'array':[1,2,3,4]}
Roland suggested that I drop the json=, successfuly cutting 5 characters out, too. So the complete location would be:
http://example.com/index.html#{'s': '2010-02-19', 'array':[1,2,3,4]}
Example assuming you have JSON support (either native or by including a JSON parse script)
var obj, text = document.location.hash;
if (text){
obj = JSON.parse(text);
}
If the browser does not have native JSON support, you can grab a script from http://www.json.org/js.html or use some framework supported variant (like YUI's http://developer.yahoo.com/yui/json/)
You say 'quite a bit'. Can you be more specific? Bear in mind that you are limited to 2083 characters on your URL.
Personally, I would be reticent to store this sort of stuff in the command line anyway. You'll have pain dealing with URL encoding/decoding, and people can get an Idea of your data structures, and possibly hack the JSON string in the URL.
Have a look at the history plugin, it might be relevant to your needs
Related
I'm looking for most elegant way of "dumping" simple JavaScript object into JavaScript source-code generated on-fly.
Purpose:
Assume we have node.js server generating HTML. We have an object x on server side. The object is simple - only strings/ints/arrays in it (so, it's JSON-able). I want to "embed" object x into HTML being generated, to be available for JavaScript code which will run on the browser. So the code:
console.log(x);
will dump exactly the same data on both server-side and browser-side.
For example - imagine I'm going to pass some additional config/data to JavaScript running on browser.
Obvious solutions:
Encoding as JSON and send as AJAX/Websocket is not a part of this question as we have to embed the object in the HTML. I don't want additional HTTP requests - everything should be passed in one go.
Encoding as JSON and simply attach to variable sounds initially good, but involves some additional escaping steps.
Using util.inspect() works for me, in this way:
var toHtml = 'var x = ' + util.inspect(theXonServer, {depth:9}) + ';';
but I'm not sure if it's "elegant" (and secure and error-prone and...)
Any better suggestions ? Standard way of doing that ?
The Wrong Way to Pass Data
It's common to get advice to just stringify some JSON and dump it into a <script> tag. This is bad advice. Don't do it.
It's important to understand why this is a bad idea.
When you string-build JavaScript, you're opening yourself up to all sorts of quirks of the language that you'd absolutely be required to understand to make sure that there are no issues.
One such quirk is that within a <script> element, the first occurrence of </script> will close the <script> element. It doesn't matter that it's in a string, the script will be closed, and the rest of the contents after that point will be treated as HTML.
HTML escaping doesn't work because JS doesn't like HTML entities.
what might start as:
<script>
window.xss = <%= JSON HERE %>
</script>
could turn into:
<script>
window.xss = {"username":"Robert Hackerman</script><script src='nefarious.js'></script>"}
</script>
Don't risk it.
The Right Way to Pass Data...
...When the Page is Rendering
The much safer way that prevents any script execution is via [data-*] attributes. You must HTML-escape the contents, but that's OK in attributes. I'm using a <script> element because it's implied that the script will be using the data.
What would start as:
<script data-foo="<%= HTML ENCODED JSON HERE %>" src="yourscript.js"></script>
Would turn into:
<script data-foo="{"username":"Robert Hackerman</script><script src='nefarious.js'></script>"}" src="yourscript.js"></script>
And if you want access to that data, you can just access the attribute value, or use the dataset api (if your target browsers support it):
var fooElement = document.querySelector('[data-foo]');
var rawData = fooElement.dataset.foo;
// or
var rawData = fooElement.getAttribute('data-foo');
var data = JSON.parse(rawData);
console.log(data);
...After the Page has Rendered
If the page has already loaded, and you want to access some data, just use an AJAX request. You'll be able to safely read in a JSON data source, which can be piped through JSON.parse to access the data object.
Util.inspect vs JSON.stringify
You only need util.inspect if your object is circular. If it's JSON encodable in 99.9% of cases you can just output it to the source with JSON.stringify.
Using JSON
There are edge cases to this - not only are JS objects more expressive than JSON (functions etc), JSON objects can do things JS objects can't (in edge cases of encoding). So make sure not only is your object serializable correctly, it's also deserializable correctly. I also assume you didn't do anything crazy like override the array constructor (which would make JS objects behave differently from JSON ones).
Security
As for security, unless your object can contain sensitive data (and it really shouldn't, whitelist it first) there should not be any related issues.
Overall option 2 is a standard approach that is quite commonly used - including on this very site.
It usually works for simple data which is most data you need to share (numbers and strings).
It saves the round trip.
It's used very often in big sites and in practice.
If there is a cookie on our website called cabbages and $.cookie("cabbages") returns this:
"purchaseType":"NONE","futurePurchaseType":"NONE","id":73041988,"unlimitedStatus":null,"hasFuturePrivilege":false,"corpUser":false,"suspendedStatus":null,
What is the prescribed or conventional way to get back the value of id? I want the ID of the visitor so in this example I'd like to write some Javascript that returns 73041988.
Contents of your cabbages cookie looks very close to json object syntax to me. So JSON.parse() would be naturally the way I would take. You just need to add curly braces to that string to make it valid json object syntax.
Actually this has got nothing to do with cookies. If any variable contains data having syntax similar to this, you can always go for JSON.parse() to extract it in to a javascript variable.
Json objects look like:
{name1:value1,name2:value2,name3:value3}
Similarly a json array looks like:
[value1,value2,value3]
and you could use JSON.parse for any data having json sytax.
You can see some more good examples of JSON syntax in links below.
http://json.org/example
http://www.tutorialspoint.com/json/json_syntax.htm
Please note that this JSON API which provides native support for json serialization in javascript may not be available in some older browsers and the function call will fail.
As you mentioned $.cookie() in your question, I guess that your project is already using JQuery. So you better use jQuery.parseJSON(), which makes use of JSON.parse where the browser provides a native implementation, and also provides a fall back parser when browser support is not available.
This Stack Overflow thread has more details about Native JSON support in browsers.
New to JSON, just trying to get my feet wet.
I know how to do this with XML via javascript, but am trying to learn how to handle JSON objects so I can switch over.
Basically I want to search through all "permalink" tags in the following JSON object and, when I find the right one, save its corresponding "title" and "id" tags to javascript variables:
http://api.soundcloud.com/users/goldenstatewarriors/tracks.json?client_id=02db8e29aa2fb5bf590f478b73137c67
Can this be done with only javascript (no PHP)? The main issue I'm facing is simply grabbing the text from the page and converting it to a json object.
You need to use a JSON parser in order to transform the JSON string into an object you can handle natively in JavaScript. Recent browsers have this functionality built in as JSON.parse(), but obviously this will not work in older browsers (we're talking very old browsers here).
A solution to that problem is to use the JSON parsing library available here. If native browser support is detected, it simply uses that, otherwise it has a JavaScript implementation to achieve the same result. The file you'll need is json2.js - simply include that as you would any other library and away you go!
An example of the code would be:
var dataObject = JSON.parse(jsonData);
As a side note, XMLHttpRequest is somewhat of a misnomer these days. It is simply a mechanism for making HTTP requests and retrieving the data returned, it doesn't have to be XML. It can be plain text, (non X)HTML, JSON, anything. In fact, I don't think I've seen anything in the wild return actual XML data for an XMLHttpRequest in a very long time.
I can do it via jQuery and/or Underscore JS as arrays of data, but I want to learn the API for just pure RAW JSON. For example, I know there is:
delete json.item
Which just simply deletes the item, but is there a set place I can go learn the full API?
--UPDATE--
I guess this came out wrong. I want to learn about Douglas Crockfords library, all of it. The JSON.func() library, not just "JSON" which is a string. For example he has a function called stringify etc. His site is a total mess, so I was wondering if there was a better place to learn about that JSON library (which has become the standard.)
There is no such thing. Raw JSON is a string, and attempting to manipulate it will only serve to damage it. Always manipulate it after decoding it.
delete will modify the property of an object, it won't let you manipulate JSON (unless that JSON is stored as the property of an object, in which case it will delete it entirely).
You appear to be asking about how to modify a JavaScript object, in which case, the "API" can be found at https://developer.mozilla.org/en/JavaScript/Reference
i'm trying to send three arrays of data from one .js file which is used by first webpage to the other .js file which is used by the second webpage.
the data in the first webpage is dynamically built so those three arrays are to be sent to the next webpage.
can anyone suggest some javascript code or tutorial.
please help...............
Thank you Guys. . . . ..
I'd suggest using the JSON data format. JSON is like XML except a lot easier to parse through. Some great examples can be found on Jquery's page:
http://api.jquery.com/jQuery.getJSON/
Everything you need to read the JSON feed can be found on jQuery. If you need to know how to structure a JSON feed you can read about it here:
http://www.json.org/js.html
This is really tough to do with strictly javascript and html. Here are some options:
You could store the array in a hidden form variable and post it to the destination page
If the dataset is small enough (< 4K), then you can store it in a cookie across requests.
If you are only using the most modern browsers (read: HTML5), you can use localstorage
You could encode the data and pass it in the url
In general, though, these are mostly hacks. Usually this kind of work is augmented by some type of server-side processing (perl, php, asp.net, etc) in which you have available some kind of storage across requests (i.e. Session in asp.net).
You could use the Web Storage API, and include a polyfill to port the functionality for older browsers:
http://code.google.com/p/sessionstorage/
https://gist.github.com/350433
Both of these use window.name to provide a session-like state. This may or may not be secure enough for your needs.
From there, you can use the following code for all browsers:
// Store on previous page
sessionStorage.setItem("yourArray", JSON.stringify(yourArray));
// Restore on following page
var yourArray = JSON.parse(sessionStorage.getItem("yourArray"));
EDIT: Older browsers may need the following for the above code sample. This is so the array can be serialized to a string, since sessionStorage only supports string key-value pairs:
https://github.com/douglascrockford/JSON-js
Check out jQuery.data() and friends. Cf.: http://api.jquery.com/category/data/
You may use cookie for that purpose.