Question

我无法将HTML数据属性转换为Javascript对象。

这是我的工作：

该属性如下：

<a id="stringObj" data-string="{'Foo':'Bar'}">Some A-Tag</a>

在Javascript / JQuery中，我按如下操作：

var obj = $("#stringObj").data('string').replace(/'/g,"\"");
obj = JSON.stringify(obj);
obj = JSON.parse(obj);

我只是使用JSON.stringify方法获得干净的结果，但这并不重要。我还在结果上尝试了“ eval”，但在console.log(typeof obj)测试中它一直是“ string”。

如何从属性中获取对象，以便像alert(obj.Foo);一样使用它？

Answer 1

使用jQuery.data()时，使用有效JSON 时，默认情况下它将作为对象返回。如有可能，请尝试交换"和'。

$(function() {
  var data = $("#stringObj").data("string");
  console.log(typeof data);
  console.log(data.Foo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="stringObj" data-string='{"Foo": "Bar"}'>Some A-Tag</a>

如果您由于某些原因无法更改HTML代码（无法交换'和"），请使用以下代码段：

$(function() {
  var data = $("#stringObj").data("string").replace(/'/g, '"');
  data = JSON.parse(data);
  console.log(typeof data);
  console.log(data.Foo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="stringObj" data-string="{'Foo': 'Bar'}">Some A-Tag</a>

Answer 2

您可以这样操作：https://codepen.io/creativedev/pen/NzBvYZ

var obj = $("#stringObj").data('string').replace(/'/g,"\"");
obj = JSON.parse(obj);
alert(obj.Foo);

Answer 3

您也可以不使用jQuery ：

var stringAttr = document.getElementById("stringObj").dataset.string.replace(/'/g,"\"");
var myObj = JSON.parse(stringAttr);
console.log(myObj.Foo);

Answer 4

我刚刚删除了JSON.stringify，并且现在可以使用了。当然，我之前对其进行了几次测试，但均未成功，但它确实因某些原因而起作用：D-谢谢。

将HTML属性转换为Javascript对象

4 个答案: