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

Question

I want to put value on element that is JSON value, but when i read this value i want to parse the json and make the value an object if this is a JSON format, if not return the string, this is what i am trying to do but it is not working.

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

so for example if the value is in JSON format i want the function to return the value as an object that i could write value.name and get 34 in this case, but if the value is simple string like "itemOne" so i expect the function to return the string "itemOne".

Answer 1

Valid JSON string should be properly quoted. In your case key "name" is missing double quotes. Correct attribute would look like value='{"name": 34}' .

Another recommendation. While you can use value (and any other) attribute, it's not very semantically right since LI element doesn't have value attributes and properties. It's better to go with data-value attribute which will pass W3C validation:

 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

Your html code, more specifically, property value of li is not a valid JSON.

Replace this:

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

With this:

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

Valid json format is a string quoted.

Answer 3

Try this:

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

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

    return jsonString;
};

And your function will be like this:

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

Answer 4

Check that the JSON is valid.

Using This Validator we can see that the JSON text is missing double quotes around "name".

Make sure to use HTML entities when using double quotes in HTML attributes.

See below code:

 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>