web-dev-qa-db-ja.com

JSONをHTML属性に保存する最良の方法は？

JSONオブジェクトをHTML要素の属性に配置する必要があります。

  1. HTMLを検証する必要はありません。

    クエンティンによる回答： JSONをdata-*属性に保存 、これは有効なHTML5です。

  2. JSONオブジェクトはどのサイズでもかまいません-つまりhuge

    森舞ku回答： HTML属性の制限は、潜在的に65536文字です 。

  3. JSONに特殊文字が含まれている場合はどうなりますか？例：{foo: '<"bar/>'}

    Quentinによる回答：通常の規則に従って、JSON文字列をエンコードしてから属性に入れます。 PHPの場合、htmlentities()関数を使用します。

EDIT-PHPおよびjQueryを使用したソリューションの例

JSONをHTML属性に書き込む：

<?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>

JQueryを使用してJSONを取得する：

$('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);

});
javascriptphphtmljson
101
BadHorsie

HTMLを検証する必要はありません。

何故なの？検証は非常に簡単なQAであり、多くのミスをキャッチします。 HTML 5 data-*属性を使用します。

JSONオブジェクトは任意のサイズ（つまり、巨大）にすることができます。

ブラウザでの属性サイズの制限に関するドキュメントを見たことはありません。

それらに遭遇した場合は、<script>にデータを保存してください。オブジェクトを定義し、要素idsをそのオブジェクトのプロパティ名にマッピングします。

JSONに特殊文字が含まれている場合はどうなりますか？ （例：{test： '<"myString />'}）

属性値に信頼できないデータを含めるための通常の規則に従ってください。 &amp;および&quot;（属性値を二重引用符で囲む場合）または&#x27;（単一引用符で属性値を囲む場合）を使用します。

ただし、これはJSONではないことに注意してください（プロパティ名は文字列で、文字列は二重引用符のみで区切る必要があります）。

36
Quentin

別の方法として、jsonデータを<script>タグ内に配置しますが、type="text/javascript"ではなく、type="text/bootstrap"またはtype="text/json"タイプでJavaScriptの実行を回避します。

次に、プログラムのある場所で、次の方法でそれを要求できます。

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

サーバー側では、次のようなことができます（この例ではphpと twig ）：

<script id="my_model" type="text/json">
  {{ my_model|json_encode()|raw }}
</script>
11
gobwas

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

出力

名：Jayson姓：Monterroso

これを確認してください： http://learn.knockoutjs.com/

5
jayM

別のオプションは、JSON文字列をbase64でエンコードし、JavaScriptで使用する必要がある場合は、atob()関数でデコードします。

var data = JSON.parse(atob(base64EncodedJSON));
5
Pavel Petrov

ここには何も派手なものはありません。 PHPから、JSON文字列にhtmlspecialcharsを実行して、特殊文字がHTMLとして解釈されないようにします。 Javascriptから、エスケープする必要はありません。属性を設定するだけで準備完了です。

2
Matchu

あなたができることは、このように要素の周りにcdataを使用することです

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

mydataは生のJSON文字列です。これがあなたと他の人の助けになることを願っています。

0
Faiyet

使用できるもう1つの考えは、属性にJSONデータをbase64文字列として格納し、window.atobまたはwindow.btoaを使用して使用可能なJSONデータに復元することです。

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