To send data from HTML form to JSON file we are using json_encode() function which returns a JSON encoded string. We are making an array of values that the user fills in the HTML form. Then we pass this array into json_encode() function. The json_encode() function returns a JSON encoded string.
The JSON. parse() method takes textual JSON data and converts it to a JavaScript object. You can then easily use this object to display data in HTML.
JSON is perfect for storing temporary data that's consumed by the entity that creates the data. A good example is user-generated data such as filling out a form or information exchange between an API and an app.
The HTML does not have to validate.
Why not? Validation is really easy QA that catches lots of mistakes. Use an HTML 5 data-*
attribute.
The JSON object could be any size (i.e. huge).
I've not seen any documentation on browser limits to attribute sizes.
If you do run into them, then store the data in a <script>
. Define an object and map element id
s to property names in that object.
What if the JSON contains special characters? (e.g. {test: '<"myString/>'})
Just follow the normal rules for including untrusted data in attribute values. Use &
and "
(if you’re wrapping the attribute value in double quotes) or '
(if you’re wrapping the attribute value in single quotes).
Note, however, that that is not JSON (which requires that property names be strings and strings be delimited only with double quotes).
Depending on where you put it,
<div>
as you asked, you need to ensure that the JSON does not contain HTML specials that could start a tag, HTML comment, embedded doctype, etc. You need to escape at least <
, and &
in such a way that the original character does not appear in the escaped sequence.<script>
elements you need to ensure that the JSON does not contain an end tag </script>
or escaping text boundary: <!--
or -->
."
or '
).For the first two cases (and for old JSON parsers) you should encode U+2028 and U+2029 since those are newline characters in JavaScript even though they are allowed in strings unencoded in JSON.
For correctness, you need to escape \
and JSON quote characters and it's never a bad idea to always encode NUL.
If the HTML might be served without a content encoding, you should encode +
to prevent UTF-7 attacks.
In any case, the following escaping table will work:
\u0000
\n
or \u000a
\r
or \u000d
"
-> \u0022
&
-> \u0026
'
-> \u0027
+
-> \u002b
/
-> \/
or \u002f
<
-> \u003c
>
-> \u003e
\
-> \\
or \u005c
\u2028
\u2029
So the JSON string value for the text Hello, <World>!
with a newline at the end would be "Hello, \u003cWorld\u003e!\r\n"
.
Another way you can do it – is put json data inside <script>
tag, but not with type="text/javascript"
, but with type="text/bootstrap"
or type="text/json"
type, to avoid javascript execution.
Then, in some place of your program, you can ask for it in this way:
function getData(key) {
try {
return JSON.parse($('script[type="text/json"]#' + key).text());
} catch (err) { // if we have not valid json or dont have it
return null;
}
}
On server side, you can do something like this (this example with php and twig):
<script id="my_model" type="text/json">
{{ my_model|json_encode()|raw }}
</script>
Another option is to base64 encode the JSON string and if you need to use it in your javascript decode it with the atob()
function.
var data = JSON.parse(atob(base64EncodedJSON));
For simple JSON objects, the code below would work.
Encode:
var jsonObject = { numCells: 5, cellWidth: 1242 };
var attributeString = escape(JSON.stringify(jsonObject));
Decode:
var jsonString = unescape(attributeString);
var jsonObject = JSON.parse(jsonString);
You can use knockoutjs,
<p>First name: <strong data-bind="text: firstName" >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>
knockout.js
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.firstName = "Jayson";
this.lastName = "Monterroso";
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
Output
First name: Jayson Last name: Monterroso
Check this: http://learn.knockoutjs.com/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With