將 JSON 對象存儲在 HTML jQuery 中的數據屬性中

Question

我在 HTML 標簽中使用data-方法存儲數據，如下所示：

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

然后我在這樣的回調中檢索數據：

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

這很好用。 我所堅持的是試圖保存對象，而不僅僅是它的一個屬性。 我試圖這樣做：

<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 標記中存儲實際對象的任何想法？

Answer 1

實際上，你的最后一個例子：

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

似乎運行良好（參見http://jsfiddle.net/GlauberRocha/Q6kKU/ ）。

好消息是 data- 屬性中的字符串會自動轉換為 JavaScript 對象。 相反，我認為這種方法沒有任何缺點！ 一個屬性足以存儲一整套數據，准備通過對象屬性在 JavaScript 中使用。

（注意：為了讓 data- 屬性自動指定為 Object 而不是 String 類型，您必須小心編寫有效的 JSON，尤其是將鍵名括在雙引號中）。

Answer 2

而不是將其嵌入文本中，只需使用$('#myElement').data('key',jsonObject);

它實際上不會存儲在 html 中，但是如果您使用的是 jquery.data，則無論如何都將其抽象化。

要取回 JSON不要解析它，只需調用：

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

如果您正在獲取[Object Object]而不是直接 JSON，只需通過數據鍵訪問您的 JSON：

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

Answer 3

這就是它對我的工作方式。

目的

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

Answer 4

通過將序列化字符串轉換為base64可以解決存儲序列化數據的許多問題。

幾乎可以在任何地方接受 base64 字符串，而不必大驚小怪。

看一眼：

• btoa()

WindowOrWorkerGlobalScope.btoa()方法從 String 對象創建一個 base-64 編碼的 ASCII 字符串，其中字符串中的每個字符都被視為一個二進制數據字節。

• 原子（）

WindowOrWorkerGlobalScope.atob()函數對使用 base-64 編碼的數據字符串進行解碼。

根據需要轉換為/從。

Answer 5

對我來說它是這樣工作的，因為我需要將它存儲在模板中......

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

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

Answer 6

結合使用的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"] 
}

Answer 7

有一種在 HTML 中存儲 JSON 的更好方法：

HTML

<script id="some-data" type="application/json">{"param_1": "Value 1", "param_2": "Value 2"}</script>

JavaScript

JSON.parse(document.getElementById('some-data').textContent);

Answer 8

我的訣竅是在鍵和值周圍添加雙引號。 如果你使用像json_encode這樣的 PHP 函數，它會給你一個 JSON 編碼的字符串和一個如何正確編碼你的想法。

如果字符串正確編碼為 json， jQuery('#elm-id').data('datakey')將返回字符串的對象。

根據 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" （ undefined不能用 JSON 字符串表示；但是null可以）。
6. "NaN" （ NaN不能用 JSON 字符串表示；Infinity 的直接表示也是 n

Answer 9

使用記錄的 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" }

Answer 10

出於某種原因，只有在頁面上使用一次時，接受的答案才對我有用，但在我的情況下，我試圖保存頁面上許多元素的數據，但除了第一個元素之外，所有數據都以某種方式丟失了。

作為替代方案，我最終將數據寫入 dom 並在需要時將其解析回來。 也許它的效率較低，但對我的目的很有效，因為我實際上是在對數據進行原型設計，而不是為生產而編寫它。

要保存我使用的數據：

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

然后讀回數據與接受的答案相同，即：

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

如果我要使用 Chrome 的調試器檢查元素，這樣做也會使數據出現在 dom 中。

Answer 11

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

Answer 12

作為記錄，我發現以下代碼有效。 它使您能夠從數據標簽中檢索數組、推送新元素並將其以正確的 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);

Answer 13

!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...

Answer 14

這段代碼對我來說很好用。

使用 btoa 編碼數據

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

然后用atob解碼

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

Answer 15

我在https://oblik.dev/utilities/config/ 中找到了一個更好的方法，基本上他們所做的是有一個解析器 from-to json-like objects 沒有雙引號：

import { Parser } from 'oblik/utils/config'

let parser = new Parser()
let result = parser.parse('foo: bar, !baz')
console.log(result) // { foo: "bar", baz: false }

更多例子：

<div ob-foo="text: Hello, num: 42">My Foo component</div>

我想看到像這種格式標准化的東西