web-dev-qa-db-ja.com

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

以下のようなHTMLタグでdata-アプローチを使用してデータを保存しています。

<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タグに保存する方法についてのアイデアはありますか？

jqueryhtmljson
118
zumzum

テキストに埋め込むのではなく、単に$('#myElement').data('key',jsonObject);を使用します

実際にはhtmlに保存されませんが、jquery.dataを使用している場合は、いずれにしても抽象化されます。

JSONを元に戻すには、解析しないでを呼び出します。

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

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

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

実際、最後の例：

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

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

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

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

136
Nicolas Le Thierry d'Ennequin

これは私のために働いた方法です。

オブジェクト

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

Get

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

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

私にとっては、テンプレートに保存する必要があります ...

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

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

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

Base64文字列は、ほとんどどこでも簡単に受け入れられます。

を見てみましょう：

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

WindowOrWorkerGlobalScope.atob()関数decodesbase-64エンコードを使用してエンコードされたデータの文字列。

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

8
Dan

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

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

JQueryドキュメントに従って：（ http://api.jquery.com/jquery.parsejson/ ）

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

  1. "{test：1}"（テストの前後に二重引用符はありません）。
  2. "{'test'：1}"（ 'test'は二重引用符の代わりに単一引用符を使用しています）。
  3. "'test'"（ 'test'は二重引用符の代わりに単一引用符を使用しています）。
  4. "。1"（数字は数字で始まる必要があります。「0.1」が有効です）。
  5. "undefined"（undefinedはJSON文字列では表現できません。ただし、nullは表現できます）。
  6. "NaN"（NaNはJSON文字列では表現できません。Infinityの直接表現もnです
3
George Donev

.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>
0
Sajjan Sarkar

記録については、次のコードが機能することがわかりました。これにより、データタグから配列を取得し、新しい要素をプッシュして、正しい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);
0
Bazley

文書化された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" }
0
user2069751

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

別の方法として、データをDOMに書き込み、必要に応じて解析し直しました。おそらく効率的ではないかもしれませんが、私は実際にデータのプロトタイプを作成しており、本番用にこれを書いているわけではないので、私の目的には適しています。

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

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

その後、データを読み戻すことは、受け入れられた答えと同じです。

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

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

0
Shane E.

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

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

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

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

let tourData = $(this).data("json");
tourData = atob(tourData);
0
Hp Sharma
!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...
0
Vishal Patel