HTML 具有嵌套属性的 SetAttribute

Question

我确定这在某处得到了回答，但我缺乏术语知识，无法找到查找的地方。

由于从服务器加载了一些 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 进行硬编码时，数据项作为对象正确加载。我假设它一定是因为我错误地设置了这个属性。

Answer 1

你可以用JSON.parse把它变成一个对象:

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

Answer 2

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

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

HTML 具有嵌套属性的 SetAttribute

HTML SetAttribute with nested properties

html

javascript

jquery

setattribute