如何将JSON对象存储在HTMLjQuery的数据属性中?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (17)

我使用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>

然后我尝试访问这样的名称属性:

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对象。相反,我认为这种方法没有任何缺点!一个属性足以存储一组完整的数据,可以通过对象属性在JavaScript中使用。

(注意:对于数据属性被自动赋予类型Object而不是String,你必须小心地编写有效的JSON,特别是用双引号括住键名)。

扫码关注云+社区