Extracting Data From Blogger JSON Feeds using JavaScript

In part2 you learned how to view non-readable JSON code in friendly format, today we will start discussing the scripting section. Here you will learn how to use JavaScript to extract information related to a specific Blogspot blog from its JSON Feed file and how simple JavaScript logics, loops, iterations and built-in functions can help you easily retrieve JSON Feeds from Blogger Data API. You will learn several methods to query a blog's public feed and get the resulting entries returned as JSON objects in an extremely way. I strongly recommend that you read w3schools JavaScript basics to understand this tutorial better. No advanced knowledge is required except familiarity with basic programming syntax. Lets get started!

Note: Click the Button below to see full list of topics under discussion.

Topics List

Tip:

You can use our HTML Editor Tool for testing all scripts shared throughout this tutorial series.

Types of Blogger JSON Feeds

There are two types of JSON feeds supported by Blogger blogs. i.e.

Posts Feed

All blog Posts data excluding the Static Pages, is stored inside the Post Feed.

We have already discussed in Part2 what blog information is contained inside a Post feed, please refer that. The Post JSON file is located at the following URL:

http://www.Your-Domain.blogspot.com/feeds/posts/default?alt=json

In our blog case it is:

http://www.mybloggertricks.com/feeds/posts/default?alt=json

Comments Feed

All blog comments data is stored inside the Post Feed. This JSON file is located at the following URL:

http://www.Your-Domain.blogspot.com/feeds/comments/default?alt=json

For example our blog comments JSON Feed is stored at

http://www.mybloggertricks.com/feeds/comments/default?alt=json

Parsing JSON feeds in JavaScript

Parsing in other words mean taking a set of data and extracting meaningful information from it. In blogger the following steps are performed for retrieving JSON feeds of a Public blog:

1. Converting json to json-in-script

First the JSON file is converted to a JavaScript supported format by simply replacing the parameter json with json-in-script in the JSON Feed URL

INFO

By using a "json-in-script" parameter, blogger encloses the JSON code inside the following JavaScript Function:

gdata.io.handleScriptLoaded( );

All the JSON code is automatically inserted inside this function as shown below:

gdata.io.handleScriptLoaded(JSON-Code-Here);

So the JSON URLs are transformed to this format accordingly:

For Posts:

http://www.mybloggertricks.com/feeds/posts/default?alt=json-in-script

For Comments:

http://www.mybloggertricks.com/feeds/comments/default?alt=json-in-script

Without this step the callback function would not work.

Tip: You can paste the above URLs in your browser address bar to see the difference.

2. Calling the Callback Function

The callback function is the sole of your JSON feeds retrieval process. This is where you request the browser what data to fetch from the server. All programming logic is written inside this JavaScript function.

You can give it any name you like. For demonstration purpose we will be using the name "mbtlist"  throughout this tutorial series.

The callback function name is passed as a parameter inside the JSON URL in order to call it. So our complete new URL would be:

For Posts:

http://www.mybloggertricks.com/feeds/posts/default?alt=json-in-script&callback=mbtlist

For Comments:

http://www.mybloggertricks.com/feeds/comments/default?alt=json-in-script&callback=mbtlist

To invoke our Callback function the above URL will be inserted inside a JavaScript src attribute as shown below:

<script type="text/javascript" src="http://www.mybloggertricks.com/feeds/posts/default?alt=json-in-script&callback=mbtlist">
</script>

3. Writing Code for the Callback Function

Finally here comes the actual coding part where you will learn how to display the total number of posts and comments published in a blog.

Lets analyze the simple snippet below.

INPUT

<!-- ######### Writing Callback Function ############# -->

<script type="text/javascript">
function mbtlist(json) {
for (var i = 0; i < json.feed.entry.length; i++)
{
var TotalPosts = json.feed.openSearch$totalResults.$t;
  }

var listing = "Total = " +TotalPosts+ " Posts" ;
document.write(listing);
}
</script>

<!-- ######### Invoking the Callback Function ############# -->

<script type="text/javascript" src="http://www.mybloggertricks.com/feeds/posts/default?alt=json-in-script&callback=mbtlist">
</script>

OUTPUT

Total = 1418 Posts

Script Illustration:

This is what the above script does:

1 First we defined a callback function  i.e. "function mbtlist(json){ }" and passed inside it json as parameter.

2 Next we will run a FOR loop to travel across the JSON hierarchy till its last array which is [ ]entry. The loop will cover the full length of the JSON content, therefore we defined it as:

for (var i = 0; i < json.feed.entry.length; i++)

INFO

"json.feed.entry.length" means:

First go to JSON node > then go to feed > then entry > then till its full length.

 

3 Next we will access the object which contains the total posts count. This data is provided by the object: openSearch$totalResults

In order to access this node we will choose this path:

json.feed.openSearch$totalResults.$t;

We saved this data inside a variable TotalPosts . The variable names are chosen by us, you can give them any name you like.

To make the output look pretty we added some text (Total and Posts ) to it which you can change with any message you like.

4 We then closed the loop because our search is complete and we have reached the specific object node we wanted. Now we will simply print this data inside another variable that we assigned as listing

5 Finally we Invoked/called our function to come and perform its task. Nothing will display or print if you don't add this last part. 

That's it! :)

Display Total Comments Count

Exact Same method as shared above because the { } feed object has exact same nodes for both Comments and Posts feeds. The only thing that needs to be changed is replacing the Post Feed URL with Comments Feed URL. Which means replacing posts with comments in the invoking part.

INPUT

<!-- ######### Writing Callback Function ############# -->

<script type="text/javascript">
function mbtlist(json) {
for (var i = 0; i < json.feed.entry.length; i++)
{
var TotalPosts = json.feed.openSearch$totalResults.$t;
}

var listing = "Total = " +TotalPosts+ " awesome comments!" ;
document.write(listing);
}
</script>

<!-- ######### Invoking the Callback Function ############# -->

<script type="text/javascript" src="http://www.mybloggertricks.com/feeds/comments/default?alt=json-in-script&callback=mbtlist">
</script>

Note: Changes made are highlighted in red font.

OUTPUT

Total = 41028 awesome comments!

 

Need Help?

This tutorial can become more productive if you ask questions to clarify any confusion or doubts you may have in understanding any logic. This is the most detailed tutorial on extracting data out of blogspot JSON feeds ever shared online, so feel free asking questions so that we may better assist you. All these tutorials are shared with sole purpose in mind to better help students and young designers with programming skills. I wish we succeed with this sincere help. Wish you all a great coding experience. Peace and blessings buddies! Catch you back with part4! =)