JQueryでHTMLデータ属性をJSONに変換する方法は？

Question

複数の不要なAJAXリクエストを避けるために、HTMLの隠し要素でJSONを使用します。 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 
      //} 
     }); 
    }) 
}); 

これはHTMLの一部である

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

CONSOLE：

<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であることを自動的に検出し、をとして解析します。だから、オブジェクトを取り戻し、それを解析する必要はありません。

のでdata使用して：あなたは12個の都市があると言うコメントで述べたように

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>

を。

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

おそらくあることをJSONを意味

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

：JSONはcities（およびairports）文字列値与えているためです あなたが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> 

バージョンが正しいか、それを使用してください。