从使用.data()添加的对象字符串中获取值

Get value from Object string added using .data()

本文关键字：字符串 对象 获取 添加 data      更新时间：2023-09-26
$('#test').attr('data-mydata', "{'x-coord': 10}");
var myData = $('#test').data("mydata");
var x = myData['x-coord'];
console.log('x-coord: ' + x);

我想把上面提到的数据附加到div上面。在执行代码时，DOM元素#test将使用数据进行更新，这非常好。然后我想从"对象"中获取数据。但是，mydata包含字符串表示。如何将这个字符串转换为对象?底线:如何获得键/值对以进行进一步处理?JSON。Parse似乎不起作用。谢谢你！

http://jsfiddle.net/quint/zyozqwv2/

JSON。解析似乎不起作用

嗯，那是因为它期望有效的 JSON。

{'x-coord': 10}不是有效的JSON -这里需要双引号，{"x-coord": 10}

一旦你解决了这个问题，你就不需要自己解析它了，.data()会自动完成:

$('#test').attr('data-mydata', '{"x-coord": 10}'); // switched quotes here
var myData = $('#test').data("mydata");
var x = myData['x-coord'];
console.log('x-coord: ' + x); // result: x-coord: 10
http://jsfiddle.net/zyozqwv2/1/

试试这个，在你的情况下一些编码发生了错误，所以使用JSON.stringify传递json对象并使用JSON.parse方法解析它也是最佳实践:)

    $('#test').data('mydata', JSON.stringify({'x-coord': 10}));
    var myData = JSON.parse($('#test').data("mydata"));
    var x = myData['x-coord'];
    console.log('x-coord: ' + x);
#test {
  width: 100px;
  height: 100px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id = 'test'></div>

相关文章：