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> 

Answer 2

您的html代码，更具体地说，li的属性值不是有效的JSON。

替换为：

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

有了这个：

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

有效的json格式是用引号引起来的字符串。

Answer 3

尝试这个：

function tryParse (jsonString){
    try {
        var obj = JSON.parse(jsonString);

        if (obj  && typeof obj  === "object" && obj  !== null) {
            return obj ;
        }
    }
    catch (e) { 
           return jsonString;
    }

    return jsonString;
};

您的功能将如下所示：

function getValue() {
    var ele =  document.querySelector('ul'),
    value = ele.firstElementChild.getAttribute('value');
    tryParse(value);
}

Answer 4

检查JSON是否有效。

使用This Validator，我们可以看到JSON文本在“名称”周围缺少双引号。

在HTML属性中使用双引号时，请确保使用HTML实体。

请参阅以下代码：

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

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