javascript - 使用 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
}

当然，这在旧版浏览器中是行不通的，所以如果你想要那种浏览器支持，你需要对它进行填充。Douglas Crockford 在这里有一个 shim ，或者如果您已经在使用该实用程序，那么jQuery 也有一个JSON 解析方法。

Answer 2

您需要为此使用JSON.parse方法：

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

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

如果您需要支持较旧的浏览器，这里是小技巧。请参阅浏览器兼容性部分。