具有嵌套属性的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

回答

相关问题