javascript - Best way to store JSON in an HTML attribute? - Stack Overflow

admin管理员组

文章数量:1134248

I need to put a JSON object into an attribute on an HTML element.

1. The HTML does not have to validate.

   Answered by Quentin: Store the JSON in a data-* attribute, which is valid HTML5.

2. The JSON object could be any size - i.e. huge

   Answered by Maiku Mori: The limit for an HTML attribute is potentially 65536 characters.

3. What if the JSON contains special characters? e.g. {foo: '<"bar/>'}

   Answered by Quentin: Encode the JSON string before putting it into the attribute, as per the usual conventions. For PHP, use the htmlentities() function.

---

EDIT - Example solution using PHP and jQuery

Writing the JSON into the HTML attribute:

<?php
    $data = array(
        '1' => 'test',
        'foo' => '<"bar/>'
    );
    $json = json_encode($data);
?>

<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, 'UTF-8'); ?>">CLICK ME</a>

Retrieving the JSON using jQuery:

$('a').click(function() {

    // Read the contents of the attribute (returns a string)
    var data = $(this).data('json');

    // Parse the string back into a proper JSON object
    var json = $.parseJSON($(this).data('json'));

    // Object now available
    console.log(json.foo);

});

I need to put a JSON object into an attribute on an HTML element.

1. The HTML does not have to validate.

   Answered by Quentin: Store the JSON in a data-* attribute, which is valid HTML5.

2. The JSON object could be any size - i.e. huge

   Answered by Maiku Mori: The limit for an HTML attribute is potentially 65536 characters.

3. What if the JSON contains special characters? e.g. {foo: '<"bar/>'}

   Answered by Quentin: Encode the JSON string before putting it into the attribute, as per the usual conventions. For PHP, use the htmlentities() function.

---

EDIT - Example solution using PHP and jQuery

Writing the JSON into the HTML attribute:

<?php
    $data = array(
        '1' => 'test',
        'foo' => '<"bar/>'
    );
    $json = json_encode($data);
?>

<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, 'UTF-8'); ?>">CLICK ME</a>

Retrieving the JSON using jQuery:

$('a').click(function() {

    // Read the contents of the attribute (returns a string)
    var data = $(this).data('json');

    // Parse the string back into a proper JSON object
    var json = $.parseJSON($(this).data('json'));

    // Object now available
    console.log(json.foo);

});

• javascript
• php
• html
• json

Share Improve this question Follow edited May 23, 2017 at 12:02 CommunityBot 111 silver badge asked Sep 6, 2011 at 15:52 BadHorsieBadHorsie 14.5k3131 gold badges124124 silver badges195195 bronze badges 5

• You should probable explain why and ask for different solution since I'm quite sure this isn't the best. You can prob use data-something attributes but I'm not sure if they can hold "huge" amount of text. As for special chars you can just encode (escape() and unescape()) the text. – Maiku Mori Commented Sep 6, 2011 at 16:00
• Yeah limit is 65536 chars (stackoverflow.com/questions/2752457/…) – Maiku Mori Commented Sep 6, 2011 at 16:02
• 1 Btw, if your attribute is named data-json you should use $(this).data('json'), the jQuery has you covered on that part. – Ciantic Commented Dec 4, 2013 at 18:19
• please fix the braces sequence )}; => }); – MotsManish Commented Jun 9, 2016 at 10:31
• @MotsManish Oops! :) – BadHorsie Commented Jun 9, 2016 at 10:37

Add a comment  | 

10 Answers 10

Sorted by: Reset to default 45

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 ids 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).

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));

Depending on where you put it,

• In a <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.
• In <script> elements you need to ensure that the JSON does not contain an end tag </script> or escaping text boundary: <!-- or -->.
• In event handlers you need to ensure that the JSON preserves its meaning even if it has things that look like HTML entities and does not break attribute boundaries (" 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:

• NUL -> \u0000
• CR -> \n or \u000a
• LF -> \r or \u000d
• " -> \u0022
• & -> \u0026
• ' -> \u0027
• + -> \u002b
• / -> \/ or \u002f
• < -> \u003c
• > -> \u003e
• \ -> \\ or \u005c
• U+2028 -> \u2028
• U+2029 -> \u2029

So the JSON string value for the text Hello, <World>! with a newline at the end would be "Hello, \u003cWorld\u003e!\r\n".

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/

Another thought that could be used is store the JSON data as a base64 string in the attribute and then using window.atob or window.btoa to restore it to usable JSON data.

<?php
$json = array("data"=>"Some json data thing");
echo "<div data-json=\"".base64_encode(json_encode($json))."\"></div>";
?>

Nothing fancy here. From PHP, give the JSON string a run through htmlspecialchars to make sure no special characters can be interpreted as HTML. From Javascript, no escaping necessary; just set the attribute and you're good to go.

What you can do is use cdata around your element/s like this

<![CDATA[  <div class='log' mydata='${aL.logData}'>${aL.logMessage}</div>     ]]>  

where mydata is a raw json string. Hope this helps you and others.

In our case replace ' by ' and inserting the json between simple quotes works perfectly for vue:

php:

$data = json_encode($data);
$data = preg_replace("/'/", ''', $data);

html:

<vue_tag :data='<?=$json?>' />

本文标签： javascriptBest way to store JSON in an HTML attributeStack Overflow