Hướng dẫn Get Data Blogger JSON Feed API

Đoạn code lấy 3 dữ liệu chính là: Tên bài, Link bài, Link hỉnh ảnh, với cách viết này chúng ta không cần sử dụng thư viện jQuery.
<script>
//<![CDATA[
function datajson(json) {
for (var n = 0; n < json.feed.entry.length; n++) {
var entry = json.feed.entry[n];
for (var s = 0; s < json.feed.entry[n].link.length; s++) {
if (json.feed.entry[n].link[s].rel === "alternate") {
var link = json.feed.entry[n].link[s].href;
break
}
}
var title = json.feed.entry[n].title.$t;
var thumb = json.feed.entry[n].media$thumbnail.url;
var html = '<a href = "' + link + '">' + title + '</a><a href = "' + link + '"><img src = "' + thumb + '"/></a>';
document.getElementById("result").innerHTML += html;
}
}
//]]>
</script>
Sau khi viết xong đoạn Script để xử lý dữ liệu thì chúng ta cần gọi đoạn script trên như sau
1. Lấy toàn bộ bài viết
<script src='/feeds/posts/default?max-results=8&amp;orderby=published&amp;alt=json&amp;callback=datajson'/>
2. Lấy theo Label
<script src='/feeds/posts/default/-/Tên Label?max-results=8&amp;orderby=published&amp;alt=json&amp;callback=datajson'/>
Cũng đoạn script trên và viết theo kiểu Ajax như sau:
Đầu tiên chúng ta cần thêm thư viện jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" />
Viết code theo kiểu Ajax chúng ta có thể chọn một trong hai
1. Chia làm hai
<script>
//<![CDATA[
function datajson(json) {
for (var n = 0; n < json.feed.entry.length; n++) {
var entry = json.feed.entry[n];
for (var s = 0; s < json.feed.entry[n].link.length; s++) {
if (json.feed.entry[n].link[s].rel === "alternate") {
var link = json.feed.entry[n].link[s].href;
break
}
}
var title = json.feed.entry[n].title.$t,
thumb = json.feed.entry[n].media$thumbnail.url;
var html = '<a href = "' + link + '">' + title + '</a><a href = "' + link + '"><img src = "' + thumb + '"/></a>';
$('#result').append(html);
}
}
$.ajax({
url: "/feeds/posts/default",
type: "get",
data: {
alt: "json",
"max-results": 5
},
dataType: "jsonp",
jsonpCallback: "datajson"
})
//]]>
</script>
2. Gộp chung
<script>
//<![CDATA[
$.ajax({
url: "/feeds/posts/default",
type: "get",
data: {
alt: "json",
"max-results": 5
},
dataType: "jsonp",
success: function(json) {
for (var n = 0; n < json.feed.entry.length; n++) {
var entry = json.feed.entry[n];
for (var s = 0; s < json.feed.entry[n].link.length; s++) {
if (json.feed.entry[n].link[s].rel === "alternate") {
var link = json.feed.entry[n].link[s].href;
break
}
}
var title = json.feed.entry[n].title.$t,
thumb = json.feed.entry[n].media$thumbnail.url;
var html = '<a href = "' + link + '">' + title + '</a><a href = "' + link + '"><img src = "' + thumb + '"/></a>';
$('#result').append(html);
}
}
})
//]]>
</script>

Trong đó bạn cần có 1 thẻ
hoặc có id là result để hiển thị dữ liệu vào vị trí đó
Để lấy theo label các bạn sửa chỗ url thành url: "/feeds/posts/default/-/Tên label"
Cái var entry = json.feed.entry[n]; bạn có thể gọi lại của các thẻ data bên dưới cho ngắn gọn, hoặc có thể xoá đi.
Cách viết:

<script type = "text/javascript">
function mycallback(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var postSummary = json.feed.entry[i].summary.$t;
var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><p>' + postSummary + '</p></div>';
document.write(item);
}
m
} </script>

Trong đó:
var postUrl = json.feed.entry[i].link[j].href; code lấy link bài viết
var postTitle = json.feed.entry[i].title.$t; đây là code để lấy tiêu đề bài viết.
var postSummary = json.feed.entry[i].summary.$t; code để lấy một đoạn bài viết đầu tiên
var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><p>' + postSummary + '</p></div>';
Trong đoạn code trên phần bôi đen chính là phần html sẽ hiển thị trên web, và các thông số như: postUrl , postTitle, postSummary các bạn sẽ gọi từ trên xuống.
Sau khi bạn viết xong thì gọi đoạn script trên để hiển thị như sau:
<script src="http://www.sharetemplate3w.blogspot.com/feeds/posts/summary/-/Blogger?max-results=5&alt=json-in-script&callback=mycallback"></script>

Một số code khác:
var postAuthor = json.feed.entry[i].author[0].name.$t; lấy tên bác giả blog
json.feed.id.$t lấy id blog
json.feed.updated.$t Cập nhật lần cuối
json.feed.category[] Danh sách label của blog
json.feed.category[i].term Lấy label thứ i
json.feed.category[0].term Lấy label đầu tiên
json.feed.openSearch$totalResults.$t Tổng số bài viết
json.feed.title.$t Tên blog của bạn
json.feed.entry[i].media$thumbnail.url Lấy link hình ảnh

Đăng nhận xét

Xem thêm
Bài viết liên quan
Danh mục: tintuc