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>

有了这个：

    The Math and Code behind it
    ===
    * The application is instantly calculating the monthly payment via the following formula:  

$$(\text{Principal})\frac{(\text{Interest rate})(1+\text{interest rate})^\text{Term}}{(1+\text{interest rate})^\text{Term}-1}$$  

 * **Principal** refers to the amount left after the downpayment (which is usually expressed as a percentage of the cost)
       * **Term** is the amount of time to pay the mortgage, usually 15 to 30 years

有效的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文本缺少“name”周围的双引号。

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

见下面的代码：

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

{{1}}

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

4 个答案: