從HTML屬性中提取JSON對象

Question

我正在動態構建JavaScript a 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> 

而且我會建議你使用數據 - *屬性，如

<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功能一個夢幻般的數據存儲功能，可存儲本身複雜的數據：

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