如何在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
            //}
        });
    })
});

安慰

對象{城市：“[1,2,3,4]”，機場：“[5,6]”} VM1345：1未捕獲的SyntaxError：位置1的JSON中的意外標記o

這是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 不是 data-*屬性的訪問者，它的數量越來越少。 它管理jQuery的元素內部數據緩存。 它從data-*屬性初始化該緩存，但它復制緩存中的數據，處理數據，永不寫回屬性。

這就是“處理數據”在這種情況下打擊你： data自動檢測到您正在閱讀的內容是JSON並為您解析。 所以你將得到一個對象，而不需要解析它。

所以使用data ：

 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 ）提供了一個字符串值：

{"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> 

---

注意：

在此編輯中 ，您的問題有一個有效的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>

但是你再次編輯它看起來像這樣，這是無效的：

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

帶有“ "的版本 是的，請務必使用它。