使用JavaScript从HTML5 data- *属性获取JSON对象

Question

这是我的HTML：

<input type="text" data-setup='{ "method" : "checkbox" }'>

这是我到目前为止的JavaScript：

var a = document.querySelectorAll('[data-setup]')
for (var i=0;i<a.length;i++) {
    alert(a[i].getAttribute('data-setup'));
}

然后警告：

ALERT: { "method" : "checkbox" }

但是我如何访问JSON“方法”？ 我希望基本上能够提醒“复选框”这个词。 任何帮助赞赏。

Answer 1

JSON.parse是从该JSON创建适当对象的最简单方法：

for (var i=0;i<a.length;i++) {
    var obj = JSON.parse(a[i].getAttribute('data-psswrd'));
    alert(obj.method); //will alert what was in the method property
    console.log(obj); // should log a proper object
}

当然，这在旧版浏览器中不起作用，因此如果您需要这种浏览器支持，则需要对其进行填充。 道格拉斯克罗克福德在这里有一个垫片，或者当然jQuery有一个JSON解析方法，如果你已经使用该实用程序。

Answer 2

您需要使用JSON.parse方法：

var myJSON = JSON.parse( a[i].getAttribute('data-psswrd') );
alert( myJSON );

所有现代浏览器和IE8 +都支持此功能。

如果您需要支持旧浏览器，那么这就是一个小问题。 请参阅浏览器兼容性部