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
}

当然，这在旧版浏览器中不起作用，因此如果您需要那种浏览器支持，则需要填充它。道格拉斯克罗克福德有垫片 here ，或者当然 jQuery 有一个 JSON parsing method如果您已经在使用该实用程序。