数据属性中的JSON对象

时间:2016-02-25 17:49:42

标签: javascript html json custom-data-attribute

我们可以以某种方式在html数据标记属性中编写JSON字符串吗?

然后在javascript中处理它以解析为普通的JSON对象。

示例:

HTML

<select class="field" data-select="{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}"></select>

JS

var obj = JSON.parse($('form').find('select').attr('data-select'));

使用单引号的解决方案:

<select class="field" data-select='{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}'></select>

1 个答案:

答案 0 :(得分:3)

使用JSON.stringify(如果是javascript)使json成为一个字符串并将其放在data- *字段中。

var json = {"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]};
var div = document.getElementById("myDiv");
div.setAttribute("data-json", JSON.stringify(json));
alert(div.getAttribute("data-json"))

检查模板引擎文档(如果您使用的是)生成字符串化的json。

小提琴:https://jsfiddle.net/b1tqxhty/