从HTML属性中提取JSON对象

Question

我使用JavaScript HTML页面动态构建并使用文本设置属性。 有时文本是一个简单的字符串，有时我有一个JSON对象，我使用JSON.stringify()将其保存为字符串。

 $("<a id=\"ftr\" myData=\"" + myString + "\" </a>").appendTo(myDiv);

然后我提取这个属性：

var temp = $(this).attr("myData"); // inside loop , $(this) refers to the correct link

当这是一个简单的文字时，一切正常。

 <a id="ftr" myData="text test"></a>

但是在提取JSON对象时，我只得到结果："[{"

 <a id="ftr" myData="[{"text":"test1","link":"http:\\www.google.com"},{"text":"test2","url":"http:www.google.com"}]></a>

如何以JSON格式提取完整对象？

Answer 1

正确使用引号

<a id="ftr" myData='[{"text":"test1","link":"http:\\www.google.com"},{"text":"test2","url":"http:www.google.com"}]'></a>

我还建议你使用像

这样的data- *属性

<a id="ftr" data-mydata='[{"text":"test1","link":"http:\\www.google.com"},{"text":"test2","url":"http:www.google.com"}]'></a>

然后您可以使用.data()

获取

var temp = $(this).data("mydata");

DEMO

Answer 2

报价已修复

  <a id="ftr" myData="[{'text':'test1','link':'http:\\www.google.com'},{'text':'test2','url':'http:www.google.com'}]></a>

Answer 3

嗯，一个选项非常简单：您的代码无效，因为JSON字符串中的双引号会关闭HTML属性值。因此，您可以在HTML中使用单引号。 （另一个问题是你永远不会关闭a标签。）

$('<a id=\'ftr\' myData=\'' + myString + '\'></a>').appendTo(myDiv);

不要这样做

更优越的选择是停止将数据序列化为JSON。你不需要。 jQuery使用$.fn.data函数提供了出色的数据存储功能，该函数可以本地存储复杂数据：

$("<a id=\"ftr\" />").data({data: dataObject}).appendTo(myDiv);

然后，您可以再次使用data功能访问数据：

$('#ftr').data('data')[0].link; // returns "http:\\www.google.com"