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

Hướng dẫn Get Data Blogger JSON Feed API đơn giản ngắn gọn, các bạn có thể áp dụng để lấy dữ liệu từ bài viết blogspot hiển thị ra ngoài trang blog của các bạn.

Các bạn có thể nhìn vô cây JSON bên dưới đó chính là các API để chúng ta có thể sử dụng để Get dữ liệu.

Đ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.write(html)

    }

  }

  //]]>

</script>

Hoặc gắn cho một ID có tên là result ở một vị trí nào đó

<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ẻ <div> hoặc <span> có id là result để hiển thị dữ liệu vào vị trí đó

<span id = 'result'/>

Để 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.

Dựa vào đoạn code trên chúng ta có thể thiết kế các mẫu giao diện blogspot bán hàng, mẫu giao diện blogspot bất động sản...

Bài viết: Hướng dẫn Get Data Blogger JSON Feed API được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog Json