如何仅使用 .attr() （或等效项）从数据属性中获取 json

Question

我觉得我被困在最简单的事情上，但我似乎找不到解决问题的方法。

我有一个 json 数组，我想通过这样的 div 上的数据属性将它传递给我的 javascript：

<div id="scope" data-json='["apple","pear"]'></div>

我的问题是我只能使用除 .data('json') 之外的任何东西来获得该值。

这是我要找的东西：https://jsfiddle.net/Wurielle/p17d71m0/1/

您可以在控制台中看到使用 .data() 进行日志记录会返回一个 json 数组（这正是我需要的），但使用 .attr() 进行日志记录只会返回纯文本。 不幸的是，由于多种原因，我不能使用 .data()。

我考虑过使用 JSON.stringify 和 JSON.parse，但我无法获得与 .data() 选项相同的结果。

除了 .data() 之外，有没有办法从数据属性中获取 json？

Answer 1

您已经尝试过JSON.parse()，这就是答案。

console.log($('#scope').attr('data-json'));

console.log($('#scope').data('json'));

console.log(JSON.parse($('#scope').attr('data-json'))); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scope" data-json='["MIL","QPL"]'></div>

Answer 2

var article = document.getElementById('scope');
var dataset = article.dataset.json;
JSON.parse(dataset);

Answer 3

完全不考虑 jQuery，我们得到与 .data() 相同的结果：

var json    = document.getElementById('scope').getAttribute('data-json');
var decoded = JSON.parse(json);

console.log("JS-only:");
console.log(decoded);

console.log("jQuery:");
console.log($('#scope').data('json'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scope" data-json='["MIL","QPL"]'></div>