获取存储在HTML元素中的JSON

Question

I have JSON within a HTML element on page that I get using PHP

echo "<div id='json'>" . json_encode($response) . "</div>";

I want to using jQuery simply to log the data to the console (for now) but the only response I get is:

Object { }

Here is my jQuery

jQuery(document).ready(function(){
    var data = jQuery("#json").data();      
    console.log(data);
});

and a sample JSON data response

{
"posts":{
  "attributes":{
     "dfp_post":3,
     "dfp_shortcode":"[dfp_ads id=1383]",
     "wildcard_pos":5,
     "wildcard_shortcode":"[widget id='wp_widget-46']",
     "twitter_id":"@TeamName",
     "twitter_pos":8,
     "facebook_id":"teamname",
     "facebook_pos":5
  },
  "0":{
     "post":{
        "id":3945,
        "pub_date":"2016-05-30 00:00:00",
        "title":"Trio to tour on back of Twickenham win",
        "excerpt":""
     }
  },

Answer 1

You need to use text() to get JSON content and then parse it using JSON.parse(). The data() method returns object of all data-* attribute values not the text data.

jQuery(document).ready(function(){
    var data = JSON.parse(jQuery("#json").text());      
    console.log(data);
});