javascript - 如何在 JQuery 中将 HTML 数据属性转换为 JSON？

Question

我在 HTML 的隐藏元素中使用 JSON 来避免多次不必要的 AJAX 请求。 JSON 已正确生成，但我无法使用 JQuery 处理它，因此我可以使用它。

问题是 elem.data("json") 返回一个对象而不是字符串，所以 parseJSON 说字符串开头有意外的 o。

$(document).ready(function () {
    console.log($('#locations-json').data('json'));   
    console.log(JSON.parse($('#locations-json').data('json'))); # tried parseJSON
    $('.class-destination-from').change(function () {
        $.when(get_destination_from_state(),function(res){
            //if (res=='city'){
            //
            //}elif(res=='airport'){
            //    pass
            //}elif(res=='empty'){
            //    pass
            //}
        });
    })
});

控制台

Object {cities: "[1, 2, 3, 4]", airports: "[5, 6]"} VM1345:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1

这是HTML的一部分:

<div id="locations-json" data-json="{&quot;cities&quot;: &quot;[1, 2, 3, 4]&quot;, &quot;airports&quot;: &quot;[5, 6]&quot;}" style="display: none"></div>

你知道如何正确转换吗？

Answer 1

经常出现的问题是 data不是大多数人认为的那样。 data 不是 data-* 属性的访问器，它既多又少。它管理元素的 jQuery 内部数据缓存。它从 data-* 属性初始化缓存，但它复制缓存中的数据、处理数据，并且从不写回属性。

在这种情况下，“处理数据”对您产生了影响:data 自动检测您正在读取的是 JSON 并为您解析。所以你会得到一个对象，不需要解析它。

所以使用数据:

var locations = $("#locations-json").data("json");
console.log(locations);
console.log("There are " + locations.cities.length + " cities");

<div id="locations-json" data-json="{&quot;cities&quot;: &quot;[1, 2, 3, 4]&quot;, &quot;airports&quot;: &quot;[5, 6]&quot;}" style="display: none"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

正如您在评论中指出的那样，有 12 个城市。这是因为 JSON 为 cities(和 airports)提供了一个 string 值:

{"cities": "[1, 2, 3, 4]", "airports": "[5, 6]"}

您可能认为 JSON 是:

{"cities": [1, 2, 3, 4], "airports": [5, 6]}

例子:

var locations = $("#locations-json").data("json");
console.log(locations);
console.log("There are " + locations.cities.length + " cities");

<div id="locations-json" data-json="{&quot;cities&quot;: [1, 2, 3, 4], &quot;airports&quot;: [5, 6]}" style="display: none"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

但是除非你需要data的各种特性，否则就用attr并解析自己:

var locations = JSON.parse($("#locations-json").attr("data-json"));
console.log(locations);
console.log("There are " + locations.cities.length + " cities");

<div id="locations-json" data-json="{&quot;cities&quot;: [1, 2, 3, 4], &quot;airports&quot;: [5, 6]}" style="display: none"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

注意:

截至this edit ，您的问题有一个有效的 div，如下所示:

<div id="locations-json" data-json="{&quot;cities&quot;: &quot;[1, 2, 3, 4]&quot;, &quot;airports&quot;: &quot;[5, 6]&quot;}" style="display: none"></div>

然后you edited it again看起来像这样，这是无效的:

<div id="locations-json" data-json="{"cities": "[1, 2, 3, 4]", "airports": "[5, 6]"}" style="display: none"></div>

带有"的版本是正确的，请务必使用。