具有嵌套屬性的HTML SetAttribute

我確定這是回答某處，但它是我缺乏術語知識，無法找到在哪裏看。具有嵌套屬性的HTML SetAttribute

我動態創建一些Html作爲從服務器加載的一些JSON數據的結果。

我使用createElement和setAttribute來創建html並將其附加到主體。

但是，我的動態html包含一個「data-」屬性，它具有更多的嵌套屬性。一個例子的最終目標是這樣的：

li.setAttribute("data-item", '{"width": 100, "height": 100, "properties": 
       { "Name": "foo", "Surname": "bar" }}');

但是當我走到了我的Java腳本的其他地方使用的數據項，屬性確認：

<li> 
    <span class=item data-item='{"width": 100, "height": 100, 
    "properties": { "Name": "foo", "Surname": "bar" }}'></span> 
</li>

運行時，我已經取得了一些成功作爲一個字符串而不是一個對象。當我硬編碼HTML時，數據項作爲對象正確加載。我做了一定的假設，因爲我錯誤地設置了這個屬性。

來源

2017-08-08 Stinkidog

如何訪問屬性？你確定從硬編碼的HTML中讀取對象時會得到一個對象嗎？ Afaik，HTML屬性**總是**字符串 –

如果您使用jQuery的'data（）'方法訪問數據屬性，它將爲您解串行化JSON。否則，您需要手動完成，如下面的兩個答案所示。 –

@RoryMcCrossan我認爲OP是使用Vanilla JS而不是JQyery。但我同意你的看法。 –

你得到一個字符串，因爲該屬性設置爲一個字符串，可以解析它後得到的數據作爲對象像這樣：

var li = document.createElement('li'); 
 
li.id = "li1"; 
 
li.setAttribute("data-item", '{"width": 100, "height": 100, "properties": { "Name": "foo", "Surname": "bar" }}'); 
 
li.innerHTML = "SAMPLE li"; 
 
document.body.appendChild(li); 
 

 

 
var data = document.getElementById('li1').getAttribute('data-item'); 
 
data = JSON.parse(data); 
 
console.log(data);

來源

2017-08-08 11:23:41

您可以使用JSON.parse把它變成一個對象：

var result = JSON.parse('{"width": 100, "height": 100, "properties": { "Name": "foo", "Surname": "bar" }}'); 
// result.width => 100 
// result.properties.Name => "foo"  etc...

來源

2017-08-08 11:23:27

具有嵌套屬性的HTML SetAttribute

回答

相關問題