商店JSON对象像

使用 data-方法在HTML标签

我存储数据，以便在HTML jQuery的数据属性：商店JSON对象像

<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标记中存储实际对象的任何想法？的

来源

2011-12-17 zumzum

而不是嵌入它在文本中只使用$('#myElement').data('key',jsonObject);

它实际上不会存储在HTML，但是如果你使用jquery.data，所有这一切反正抽象。

要获得JSON回来不解析它，只要致电：

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

如果您收到[Object Object]，而不是直接的JSON的，只是数据密钥访问您的JSON：

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

来源

2011-12-17 05:20:19

因此，使用数据 - 的方式让我来存储值为每个删除按钮（每个按钮获得一个不同的json对象......）我在表格中放置了hmtl标签，就像我上面显示的那样，你是在建议我允许将每个对象与相应的删除按钮相关联吗？我该怎么做，我将如何使用$（'＃myElement'）以相同的方式？对不起，我没有经历过这个。谢谢 – zumzum 2011-12-17 06:01:30

所以我最终分配了一个索引给每个html按钮：，并将JSON对象数组存储在$ objects变量中。然后当点击一个按钮时，我通过下面的方式查看按钮索引：var buttonIndex = $（this）.data（'index'）;然后从之前保存的相应对象中获得如下所示：$ objects [buttonIndex]。这工作正常，不知道这是否是正确的方式。感谢您的反馈意见！ – zumzum 2011-12-17 07:35:40

108

其实，你的最后一个例子：

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

似乎工作正常（见http://jsfiddle.net/GlauberRocha/Q6kKU/）。

好的是，data-属性中的字符串会自动转换为JavaScript对象。相反，我认为这种方法没有任何缺点！一个属性足以存储整个数据集，可通过对象属性在JavaScript中使用。（注意：对于数据属性被自动赋予类型Object而不是String，必须小心编写有效的JSON，特别是用双引号括住键名）。

来源

2012-02-24 12:05:59

+15

如果有帮助的话，下面是如何访问以上内容：`$（'div'）。data（'foobar'）。foo`。 http://api.jquery.com/data/ – Gary 2013-08-14 03:40:41

@GlauberRocha如果你在data-foobar对象中有两个元素，并且你只想删除一个元素，那么该怎么做？ – 2014-08-06 14:50:23

对我来说，工作就像是，作为我需要将其存储在模板 ...

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

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

来源

2014-05-26 12:02:39 molokoloco

使用documented jquery .data(obj) syntax允许你存储的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" }

来源

2015-11-18 21:14:17 user2069751

出于某种原因，只有在使用一次在页面上公认的答案为我工作，但对我来说，我想保存数据在页面上的许多元素上，除了第一个元素之外，所有数据都以某种方式丢失了。

作为一种替代方法，我最终将数据写入DOM并在需要时解析它。也许效率较低，但对我的目的很有效，因为我真的是对数据进行原型设计，而不是将其写入生产环境。

要保存我使用的数据：

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

，以便然后读回数据是公认的答案，即相同的：

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

这样做，这样也让数据显示如果我要用Chrome的调试器来检查元素的话。

来源

2016-03-05 02:01:16

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

来源

2016-03-23 14:07:18

与存储序列化的数据，很多问题都可以通过序列化的字符串转换为base64来解决。一个base64字符串可以在任何地方被接受，无需大惊小怪。看看：

atob() 
btoa()

转换为/根据需要。

来源

2016-12-20 19:17:01 Dan

这是如何为我工作的。

要在HTML数据属性，Stringy JSON对象中保存JSON并使用“encodeURIComponent（）”方法对其进行编码。

在读取数据时，使用“decodeURIComponent（）”方法解码并将字符串解析为JSON对象。

例子：

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

保存数据：

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

读取数据：

来源

2017-09-29 17:47:38

为了记录在案，我发现下面的代码工作。它使您能够从数据标记中检索数组，并推入新的元素，并以正确的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);

来源

2017-10-26 13:33:29 Bazley

把戏对我来说是周围添加键双引号和值。如果你使用像json_encode这样的php函数会给你一个json编码的字符串和一个想法如何propery编码你的。

jQuery（'＃elm-id'）。data（'datakey'）将返回字符串的对象，如果该字符串正确编码为json。

作为每jQuery文档：（http://api.jquery.com/jquery.parsejson/）

在格式错误的JSON字符串结果在JavaScript异常传递被抛出。例如，下面的都是无效的JSON字符串：

“{测试：1}”（测试没有双引号括起来）。
“{'test'：1}”（'test'使用单引号而不是双引号）。
“'test'”（'test'使用单引号而不是双引号）。
“.1”（数字必须以数字开头;“0.1”将有效）。
“undefined”（undefined不能用JSON字符串表示;但null可以）。
“南”（NAN不能在JSON字符串来表示;无限的直接表示是也是n

来源

2017-12-09 19:46:37

商店JSON对象像

回答

相关问题