獲取JSON存儲在一個HTML元素

我頁面上的HTML元素中JSON，我開始使用PHP獲取JSON存儲在一個HTML元素

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

我想使用jQuery僅爲記錄數據到控制檯（現在），但唯一的反應我得到的是：

Object { }

這裏是我的jQuery

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

和樣本JSON數據響應

{ 
"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":"" 
    } 
    },

來源

2016-06-10 WebDevDanno

爲什麼你不使用'text（）'而不是'data（）'。 – Mohammad

爲什麼不把'json作爲js-var放在第一位？會容易得多！在html中存儲數據不是一個好選擇... – Jeff

您需要使用text()獲得JSON的內容，然後使用JSON.parse()解析它。 data()方法返回所有data-*屬性值的對象而不是文本數據。

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

來源

2016-06-10 14:15:32

哦，親愛的。什麼是堆棧溢出資源的浪費。 '.text（）'不會'data（）'傻我;） – WebDevDanno

雖然給出的答案解決您的問題，我想給你一個不同的答案：

這將是更好的存儲JSON直供如JavaScript變種。首先，您不必在稍後獲取它，其次它不是將數據存儲在html元素中的最佳選擇。之後的任意位置

echo "<script>jsonData=" . json_encode($response) . ";</script>";

那麼就沒有必要取它從一個HTML字符串轉換....

後，你可以訪問它（：

所以我建議這樣做你已經聲明）：

<script> 
    console.log(jsonData); 
</script>

來源

2016-06-10 14:26:08 Jeff

我絕對同意我應該這樣做，而不是打印出隱藏的HTML元素。但是，現在我在控制檯'Object {posts：Object}'中獲得了這個'' – WebDevDanno

您還可以使用console.dir（data）來查看更多的對象。 – Adder

你可以點擊帖子裏面的'Object'，它會打開然後（至少在chrome中）。 – Jeff

獲取JSON存儲在一個HTML元素

回答

相關問題