数据属性上的 Json

Question

Hi everyone I have a json in a data attribute and I have to take the data that is inside, I can get the string inside the data attribute but I can't get access to the object.

This is my code:

HTML

<a data-password="{Show:'Show', Hide:'Hide'}">Show</a>

JS

$(document).ready(function() {

    $("a[data-password]").click(function(e) {
        var lJson = $(this).attr("data-password");

        console.log(lJson);

        lJson2 = JSON.parse(lJson);

        console.log(lJson2.Hide);
    });

});

Answer 1

The issue is that the JSON inside of your data attribute is not properly stringified .

The stringified version should look like {"Show":"Show", "Hide":"Hide"} with the keys and string values inside double quotes.

Try this example below for the working version:

 $(document).ready(function() { $("a[data-password]").click(function(e) { var lJson = $(this).attr("data-password"); console.log(lJson); lJson2 = JSON.parse(lJson); console.log(lJson2.Hide); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a data-password='{"Show":"Show", "Hide":"Hide"}'>Show</a>