Display "Label List" using Blogger JSON Feeds

In Part3 you learned how a simple JavaScript technique is used to fetch data from a blogger JSON file and you also exercised a simple example of retrieving the total posts count published by a blog. Today we will discuss how to print the "Total Label List" created inside a blog to categorize content. You will be able to display all Category Links or Label links used by a blogspot blog. It is almost the same technique Blogger uses to create the Labels Widget or Labels Cloud gadget. This tutorial is the first of its kind to be shared online so make sure you read it carefully to excel playing with JSON feeds the best you can.

Before proceeding, if you are new to Blogger Labels and its use then take a minute to read this post first:

• READ: What are Blogger labels or Categories?

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

Topics List

JSON Feed gives Only Label Names

The full list of categories used by an blogspot blog is stored inside the [ ] category array node. Each element inside the array has a Name/Value pair where the Name is called "term" and the Value is the Label-name that we need as shown below.

 

You can observe that no information is given regarding the Label Links/URLS, we just have access to the Label Names. In this tutorial you will learn how to print the above list along with their Specific URLS, so lets get to work!

Also observe that the information we need is stored inside json.feed.category[k].term path where K is the array element position.

First we will access json then > feed then > category and then > each term value.

Extracting Category List From JSON Feed '[ ] category' Node

To achieve this purpose we will first write a JavaScript code to retrieve and print the Labels List as plain text, later we will discuss how to give each Label its proper URL.

INPUT

 

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

<script type="text/javascript">
function mbtlist(json) {
var  ListTag= "";

for (var k = 0; k < json.feed.category.length; k++)
{
ListTag +=  "<li>"+json.feed.category[k].term+"</li>";
}

var listing = "<H3>CATEGORY LIST :</H3><ol class='mbt-ol'>"
+ListTag+
"</ol> " ;

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>

<!-- ######### Styles for Look ############# -->

<style>
.mbt-ol {width:300px; margin:10px;}
.mbt-ol li {border-bottom:1px dotted #ddd; padding:5px; }
</style>

OUTPUT

NOTE

I have shown only first 11 Labels because the actual list is 45 which would fill up a big space so we are just sharing a small view. To see the actual list copy our code above and paste it inside our HTML Editor to see the code in action.

This is how the above script works:

PS: (I assume you have already exercised part3 of our tutorial series):

1. First we created a variable (ListTag) for storing Label name in it and assigned it an empty value ( " ").

2.  Then we ran a FOR Loop starting from k=0 and going up to json.feed.category.length  (Can you answer why? :) )

3. We then assigned ListTag to the path where each label is stored. Since the [ ] category node has multiple sub-nodes that is why we ListTag assigned with a += sign and not ===. So that each label name is kept on added to ListTag. The k inside category [k] is done so to ensure we access the correct sub-node term value each time sequentially. Each time the loop will run it will fetch one value of term and store it inside ListTag, this way all the Label list is retrieved! I have enclosed json.feed.category[k].term inside <li> tags so that each value is printed nicely inside an ordered bullet list.

INFO:

A string is always enclosed inside (") double quotes in JavaScript and variables are always enclosed inside (+) signs. This is why we enclosed <li> inside "<li>"  and the Label list variable inside +... +

4. Finally we stored the results inside the variable listing and printed it. In order to make sure the List is displayed nicely we added some styles to the <ol> ordered list using the class name 'mbt-ol'.

Assign Hyperlinks to Plain Label List

Now that you have understood the concept on how this list is displayed, lets make a small modification to the code above to replace each label with its hyperlink.

In blogger all label have the following URL structure:

http://Blog-Name.blogspot.com/search/label/Label-Name

In our case it would be:

http://www.mybloggertricks.com/search/label/Label-Name

In the code above replace this part:

ListTag += "<li>"+json.feed.category[k].term+"</li>";

with this href attribute:

ListTag +=  "<li><a href='http://www.mybloggertricks.com/search/label/" + json.feed.category[k].term + "'>"+json.feed.category[k].term+"</a></li>";

OUTPUT

That simple! Go on test and play with the code to see it Live for yourself. :)

How to Display only first 10 Labels?

If you don't want to display the full list of labels then you can choose to display selected labels by making the following modification

Replace this code

for (var k = 0; k < json.feed.category.length; k++)
{

with this condition:

for (var k = 0; k < json.feed.category.length; k++)
{ if (k < 10)

To display 30 items just replace 10 with 30 and so on.

Need Help?

In our coming tutorials we will be digging deep inside the [ ] entry array where all your blog posts data is stored. Some of you also asked how to display more than 25 items per page in JSON Feed, I will discuss them all in my coming tutorials so stay tuned with all coming updates. Feel free asking as many questions as you can to better understand each and every logic. I hope these step-by-step programming guide may help most of you in understanding some basic and core logics.

Peace and blessings buddies! :>

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 10/15/2015