JSONオブジェクトをHTML jQueryのデータ属性に格納する

私はこのdata-ような方法でデータをHTMLタグに格納しています。

<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td>

次に、次のようなコールバックでデータを取得しています。

$(this).data('imagename');

それはうまくいきます。私が行き詰まっているのは、オブジェクトのプロパティの1つだけではなく、オブジェクトを保存しようとしていることです。私はこれをやろうとしました：

<td><button class='delete' data-image='"+results[i]+"'>Delete</button></td>

次に、次のようにnameプロパティにアクセスしようとしました。

var imageObj = $(this).data('image');
console.log('Image name: '+imageObj.name);

ログは私に伝えますundefined。だから私はdata-属性に単純な文字列を保存できるようですが、JSONオブジェクトを保存することはできません...

私はまた、この構文のキッドを運なしで使用しようとしました：

<div data-foobar='{"foo":"bar"}'></div>

data-アプローチを使用してHTMLタグに実際のオブジェクトを格納する方法についてのアイデアはありますか？

テキストに埋め込む代わりに、 $('#myElement').data('key',jsonObject);

実際にはhtmlに格納されませんが、jquery.dataを使用している場合は、とにかくすべて抽象化されます。

JSONを取得するには、解析せずに、次を呼び出します。

var getBackMyJSON = $('#myElement').data('key');

[Object Object]直接のJSONではなく取得している場合は、データキーでJSONにアクセスします。

var getBackMyJSON = $('#myElement').data('key').key;

実際、最後の例：

<div data-foobar='{"foo":"bar"}'></div>

うまく機能しているようです（http://jsfiddle.net/GlauberRocha/Q6kKU/を参照）。

良い点は、data-属性の文字列が自動的にJavaScriptオブジェクトに変換されることです。逆に、このアプローチには欠点はありません！1つの属性でデータのセット全体を保存でき、オブジェクトプロパティを介してJavaScriptですぐに使用できます。

（注：data-属性にStringではなくObjectタイプが自動的に与えられるようにするには、特にキー名を二重引用符で囲むために、有効なJSONを書くように注意する必要があります）。

これは私にとってそれがどのように機能したかです。

対象物

var my_object ={"Super Hero":["Iron Man", "Super Man"]};

セットする

文字列化されたオブジェクトをencodeURIComponent（）でエンコードし、属性として設定します：

var data_str = encodeURIComponent(JSON.stringify(my_object));
$("div#mydiv").attr("data-hero",data-str);

取得する

値をオブジェクトとして取得するには、decodeURIComponent（）を使用して、デコードされた属性値を解析します。

var data_str = $("div#mydiv").attr("data-hero");
var my_object = JSON.parse(decodeURIComponent(data_str));

シリアル化されたデータの格納に関する多くの問題は、シリアル化された文字列をbase64に変換することで解決できます。

base64文字列は、大騒ぎすることなく、ほぼどこでも受け入れることができます。

を見てみましょう：

• btoa（）

このWindowOrWorkerGlobalScope.btoa()メソッドは、文字列の各文字がバイナリデータのバイトとして扱われるStringオブジェクトから、base-64でエンコードされたASCII文字列を作成します。

• atob（）

WindowOrWorkerGlobalScope.atob()関数は、復号ベース64符号化を用いて符号化されたデータの列を。

必要に応じて変換します。

私はそれをテンプレートに保存する必要があるので、そのように機能します...

// Generate HTML
var gridHtml = '<div data-dataObj=\''+JSON.stringify(dataObj).replace(/'/g, "\\'");+'\'></div>';

// Later
var dataObj = $('div').data('dataObj'); // jQuery automatically unescape it

私にとっての秘訣は、キーと値を二重引用符で囲むことでした。のようなPHP関数を使用するjson_encodeと、JSONエンコードされた文字列と、適切にエンコードする方法がわかります。

jQuery('#elm-id').data('datakey') 文字列がjsonとして適切にエンコードされている場合、文字列のオブジェクトを返します。

jQueryドキュメントによると：（http://api.jquery.com/jquery.parsejson/）

不正な形式のJSON文字列を渡すと、JavaScript例外がスローされます。たとえば、以下はすべて無効なJSON文字列です。

1. "{test: 1}"（testそれを囲む二重引用符はありません）。
2. "{'test': 1}"（'test'二重引用符の代わりに単一引用符を使用しています）。
3. "'test'"（'test'二重引用符の代わりに単一引用符を使用しています）。
4. ".1"（数字は数字で始まる必要"0.1"があります。有効です）。
5. "undefined"（undefinedJSON文字列で表すことはできません。nullただし、表すことはできます）。
6. "NaN"（NaNJSON文字列で表すことはできません。Infinityの直接表現もnです。

併用window.btoaし、window.atob一緒にして JSON.stringifyとJSON.parse。

-これは単一引用符を含む文字列で機能します

データのエンコード：

var encodedObject = window.btoa(JSON.stringify(dataObject));

データのデコード：

var dataObject = JSON.parse(window.atob(encodedObject));

データがどのように構成され、後でクリックイベントでデコードされるかの例を示します。

htmlを作成し、データをエンコードします。

var encodedObject = window.btoa(JSON.stringify(dataObject));

"<td>" + "<a class='eventClass' href='#' data-topic='" + encodedObject + "'>" 
+ "Edit</a></td>"

クリックイベントハンドラーでデータをデコードします。

$("#someElementID").on('click', 'eventClass', function(e) {
            event.preventDefault();
            var encodedObject = e.target.attributes["data-topic"].value;
            var dataObject = JSON.parse(window.atob(encodedObject));

            // use the dataObject["keyName"] 
}

使用して文書化jqueryの.dataセクション（OBJ）の構文は、あなたはDOM要素の上にオブジェクトを保存することができます。data-オブジェクトの値にキーが指定されていないため、要素を検査しても属性は表示されません。ただし、オブジェクト内のデータはキーで参照することも、オブジェクト.data("foo")全体をで返すこともできます.data()。

だから、あなたはループを設定仮定とresult[i] = { name: "image_name" }：

$('.delete')[i].data(results[i]); // => <button class="delete">Delete</delete>
$('.delete')[i].data('name'); // => "image_name"
$('.delete')[i].data(); // => { name: "image_name" }

何らかの理由で、受け入れられた回答がページで1回使用された場合にのみ機能しましたが、私の場合、ページ上の多くの要素のデータを保存しようとして、最初の要素を除くすべてのデータが失われました。

別の方法として、私はデータをdomに書き込み、必要に応じて解析して戻すことになりました。おそらく効率は落ちますが、実際にはデータのプロトタイプを作成していて、本番用に作成していないので、私の目的にはうまく機能しました。

使用したデータを保存するには：

$('#myElement').attr('data-key', JSON.stringify(jsonObject));

次にデータを読み戻すことは、受け入れられた回答と同じです。

var getBackMyJSON = $('#myElement').data('key');

この方法でこれを行うと、Chromeのデバッガーで要素を検査する場合、データがdomに表示されます。

.data()ほとんどの場合、問題なく動作します。私が問題を抱えたのは、JSON文字列自体に単一引用符があったときだけでした。私はこれを乗り越える簡単な方法を見つけることができなかったので、このアプローチに頼りました（サーバー言語としてColdfusionを使用しています）：

    <!DOCTYPE html>
        <html>
            <head>
                <title>
                    Special Chars in Data Attribute
                </title>
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
                <script>
                    $(function(){
                        var o = $("##xxx");
                        /**
                            1. get the data attribute as a string using attr()
                            2. unescape
                            3. convert unescaped string back to object
                            4. set the original data attribute to future calls get it as JSON.
                        */
                        o.data("xxx",jQuery.parseJSON(unescape(o.attr("data-xxx"))));
                        console.log(o.data("xxx")); // this is JSON object.
                    });
                </script>
                <title>
                    Title of the document
                </title>
            </head>
            <body>
                <cfset str = {name:"o'reilly's stuff",code:1}>
<!-- urlencode is a CF function to UTF8 the string, serializeJSON converts object to strin -->
                <div id="xxx" data-xxx='#urlencodedformat(serializejson(str))#'>
                </div>
            </body>
        </html>

記録として、次のコードが機能することを確認しました。これにより、データタグから配列を取得し、新しい要素をプッシュして、正しいJSON形式でデータタグに格納し直すことができます。したがって、同じコードを再度使用して、必要に応じて配列にさらに要素を追加できます。$('#my-data-div').attr('data-namesarray', names_string);配列が正しく格納されていることがわかりましたが、$('#my-data-div').data('namesarray', names_string);機能しません。

<div id="my-data-div" data-namesarray='[]'></div>

var names_array = $('#my-data-div').data('namesarray');
names_array.push("Baz Smith");
var names_string = JSON.stringify(names_array);
$('#my-data-div').attr('data-namesarray', names_string);

!DOCTYPE html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("#btn1").click(function()
{
person = new Object();
person.name = "vishal";
person.age =20;
    $("div").data(person);
});
  $("#btn2").click(function()
{
    alert($("div").data("name"));
});

}）;

</script>
<body>
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
<div></div>
</body>


</html>

Anser:-Attach data to selected elements using an object with name/value pairs.
GET value using object propetis like name,age etc...

このコードは私にとってはうまく機能しています。

btoaでデータをエンコードする

let data_str = btoa(JSON.stringify(jsonData));
$("#target_id").attr('data-json', data_str);

そして、それをatobでデコードします

let tourData = $(this).data("json");
tourData = atob(tourData);