具有嵌套属性的 HTML SetAttribute答案

【问题标题】：HTML SetAttribute with nested properties具有嵌套属性的 HTML SetAttribute
【发布时间】：2017-08-08 11:18:06
【问题描述】：

我确信这在某处得到了解答，但由于我缺乏术语知识，无法找到在哪里查找。

由于从服务器加载了一些 json 数据，我正在动态创建一些 Html。

我正在使用 createElement 和 setAttribute 来创建 html 并将其附加到主体。

但是，我的动态 html 包含一个“data-”属性，该属性具有进一步的嵌套属性。最终目标示例如下：

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

我在跑步的时候已经取得了一些成功：

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

但是当我在我的 java 脚本的其他地方使用数据项时，属性被识别为字符串而不是对象。当我对 HTML 进行硬编码时，数据项会作为对象正确加载。我假设它一定是因为我错误地设置了这个属性。

【问题讨论】：

如何访问该属性？您确定从硬编码的 HTML 中读取对象时会得到一个对象吗？ Afaik，HTML 属性是 always 字符串
如果您使用 jQuery 的 data() 方法访问数据属性，它将为您反序列化 JSON。否则，您需要手动完成，如下面的两个答案所示。
@RoryMcCrossan 我认为 OP 使用的是 Vanilla JS 而不是 JQyery。但我同意你的观点。
@ShaktiPhartiyal 他们的例子是，但是他们用 jQuery 标记了这个问题，所以我想我会提供替代方案
我设法通过建议的答案解决了我的问题。使用 JSON.parse() 时，我的字符串不是 JSON 格式的错误，原来我缺少右括号。总是简单的事情......

标签： javascript jquery html setattribute

【解决方案1】：

你得到一个字符串是因为属性被设置为一个字符串，你可以像这样解析后将数据作为一个对象获取：

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);

【讨论】：

可悲的是，这并没有回答问题标题:(

【解决方案2】：

您可以使用 JSON.parse 将其转换为对象：

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

【讨论】：