从数据属性中检索 JSON答案

【问题标题】：Retrieving JSON from data attribute从数据属性中检索 JSON
【发布时间】：2018-11-28 15:57:27
【问题描述】：

我想使用 JavaScript 或 jQuery 获取下面的 data-persondetals JSON。我无法使用data() 或javascript 属性函数访问它。它总是返回空。

<div class="xgt_full_member_details" data-persondetails="{" skill_01":"skill="" 01="" title","skill_01_percent":"60","skill_02":"skill="" 02="" title","skill_02_percent":"","skill_03":"skill="" 03="" title","skill_03_percent":"","skill_04":"skill="" 04="" title","skill_04_percent":""}"=""></div>

【问题讨论】：

您需要对 JSON 字符串中的双引号进行转义。使用\" 而不是"（或者，使用单引号来表示属性本身会容易得多。）
那么你需要使用有效的JSON，因为你有很多语法错误；不匹配的引号，缺少逗号，没有键，= 不应该在哪里等等。然后你可以简单地使用 jQuery 的 data() 方法来检索对象。
Uncaught SyntaxError: JSON.parse () at HTMLDivElement. (xg-team-script.js?ver=1.0.0:9) at HTMLDocument 的 JSON 输入意外结束.dispatch (jquery.js?ver=1.12.4:3) 在 HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
我有一组数据，下面这个我必须像我在这里所做的那样通过 html 数据属性传递它 $skill['skill_01'] = get_post_meta(get_the_ID(),'xgt_team_slider_skill_1',true) ; $skill['skill_01_percent'] = get_post_meta(get_the_ID(),'xgt_team_slider_skill_1_percent',true); data-personDetails=''
首先正确格式化您的数据。这不是有效的 JSON。其次，重新审视$.data() 的使用方式。第三，发布您检索此数据的尝试。第四，那不是数组。

标签： javascript jquery json

【解决方案1】：

您需要在 json 中转义双引号或将其包裹在单引号中。
然后，使用

let persondetailsJSON = JSON.parse($('.xgt_full_member_details').attr("data-persondetails"))

编辑：3. 使用正确的 JSON。

【讨论】：

【解决方案2】：

首先你需要对 json 进行转义，否则 HTML 将无法工作。第二件事，读取数据属性。

JSON.parse(document.querySelector('xgt_full_member_details').dataset.personaldetails);

希望对你有帮助。

【讨论】：

data() 将自动解析格式正确的 json。
我没有使用 JQuery，它是 vanilla JS