javascript - Html 将 json 值插入元素并将其转换为对象

Question

我想把值放在 JSON 值的元素上，但是当我读取这个值时，我想解析 json 并使该值成为一个对象，如果这是一个 JSON 格式，如果不返回字符串，这就是我我正在尝试做，但没有用。

HTML:

<ul>
  <li value="{name:34}">Item Two</li>
</ul>

JS:

function getValue() {
    var ele =  document.querySelector('ul'),
    value = ele.firstElementChild.getAttribute('value');
    try {
      value = JSON.parse(value);
    } catch (e) {
      alert('invalid json');
    }
    return value;
}

例如，如果值是 JSON 格式，我希望函数将值作为对象返回，在这种情况下我可以编写 value.name 并获得 34，但如果值是简单的字符串，如“itemOne”，那么我希望该函数返回字符串“itemOne”。

Answer 1

应正确引用有效的 JSON 字符串。在您的情况下，键“名称”缺少双引号。正确的属性看起来像 value='{"name": 34}'。

另一个建议。虽然您可以使用 value(和任何其他)属性，但它在语义上不是很正确，因为 LI 元素没有 value 属性。最好使用将通过 W3C 验证的 data-value 属性:

function getValue() {
    var ele = document.querySelector('ul'),
        value = ele.firstElementChild.getAttribute('data-value');
    try {
        value = JSON.parse(value);
    } catch (e) {
        alert('invalid json');
    }
    return value;
}

document.write(JSON.stringify( getValue() , null, 4));

<ul>
    <li data-value='{"name":34}'>Item Two</li>
</ul>