在 HTML jQuery 的 data 属性中存储 JSON 对象

我使用 data-方法在 HTML 标记中存储数据，如下所示:

<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 标记中存储实际对象有什么想法吗？

319709 次浏览
小开
最佳答案

使用 $('#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 对象。恰恰相反，我看不出这种方法有任何缺点！一个属性足以存储整个数据集，可以通过对象属性在 JavaScript 中使用。

(注意: 对于自动给予 Object 类型而不是 String 类型的 data-Attribute，您必须注意编写有效的 JSON，特别是要用双引号括起密钥名称)。

小开

对我来说就是这样，作为 我需要把它存储在模板中..。

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


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

使用 文档化的 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" }
小开

出于某种原因，只有在页面上使用一次时，这个被接受的答案才对我有效，但在我的情况下，我试图保存页面上许多元素的数据，而除了第一个元素之外，所有元素的数据都丢失了。

作为一种替代方法，我最终将数据写到 dom 中，并在需要时将其解析回来。也许它的效率较低，但是对于我的目的来说工作得很好，因为我实际上是在原型化数据，而不是为了生产而编写它。

为了保存我使用的数据:

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

然后将数据读回与接受的答案相同，即:

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

如果我用 Chrome 的调试器来检查元素，这样做也会使数据显示在域中。

小开

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

通过将 序列化字符串转换为 基地64，可以解决存储序列化数据的许多问题。

Base64字符串几乎可以在任何地方被接受，没有任何麻烦。

请看:

WindowOrWorkerGlobalScope.btoa()方法创建一个 base-64编码的 字符串中的每个字符 字符串被视为二进制数据的一个字节。

WindowOrWorkerGlobalScope.atob()函数 解码一串数据 是用 base64编码的。

根据需要转换为/从。

小开

我就是这么做的。

反对

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

走开

要获得作为对象的值，使用 DecdeURIComponent ()解析已解码的属性值:

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

郑重声明，我发现以下代码可以工作。它使您能够从 data 标记中检索数组，推送一个新元素，并以正确的 JSON 格式将其存储回 data 标记中。因此，如果需要，可以再次使用相同的代码向数组中添加更多元素。我发现 $('#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);
小开

我的诀窍是 在键和值周围添加双引号。如果您使用像 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
小开 
!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);
小开

结合使用 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>"

在 click 事件处理程序中解码数据:

$("#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"]
}
小开

在 HTML 中存储 JSON 有一种更好的方法:

超文本标示语言

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

JavaScript

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

我在 < a href = “ https://oblik.dev/tools/config/”rel = “ nofollow norefrer”> https://oblik.dev/utilities/config/中找到了一个更好的方法 基本上，它们所做的就是拥有一个类似于 from-to json 的解析器对象，而且没有双引号:

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>

我希望看到这样的格式标准化


提交答案