Create an Index in blogger alphabetically

Question

I am trying to create an Index for my blog. I want to show a different page for different letters. For eg, In "Page A", I want to show all the labels starting with "A" ONLY. Then "Page B", "Page 0" etc.

I have figured out a code which gives out all the lists in the site:

function cat(json){ //get categories of blog & sort them
    var label = json.feed.category;
    var lst=[];

    for (i=0; i<label.length; i++){
          lst[i] = label[i].term ; 

      document.getElementById("listspan").innerHTML =  document.getElementById("listspan").innerHTML + "<a href=\"/search/label/" + label[i].term + "\">" + label[i].term + "</a><br>"  
     }
}

<span id="listspan"></span>
<script src="http://www.chordzone.org/feeds/posts/summary?alt=json&max-results=0&callback=cat">
</script>

The issue that I'm facing is that the page crashes due to the large amount of labels.

Is there any way that I can reduce the load on the page, so that only labels starting with "A" or "B" etc., can be shown. Is it possible to sort the labels alphabetically during the json call and show only the required labels, rather than calling all the labels in the site at once?

Any help is appreciated.

score 1 · Accepted Answer · edited May 23 '17 at 11:52

You can use filter method as json.feed.category is an Array.

.filter(function(category) {
  return category.term.toLowerCase().indexOf('a') === 0;
})

After filtered, all the item in that array is starting with "A", then insert those items into DOM. And using appendChild method is faster than innerHTML in this case. See this HERE.

.forEach(function(category) {
  var a = document.createElement('a');
  a.href = 'search/label/' + category.term;
  a.innerText = category.term;
  listspan.appendChild(a);
  listspan.appendChild(document.createElement('br'));
});

JSFIDDLE

Edit:

Copy the code below to a new HTML file, it works for me:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      var cat = function(json) {
       var categories = json.feed.category;
       var lst = [];
       var listspan = document.createElement('span');
       listspan.id = 'listspan';

       categories
         // get the labels starting with "A" ONLY.
         .filter(function(category) {
           return category.term.toLowerCase().indexOf('a') === 0;
         })
         // not required
         .sort(function(a, b) {
           return +(a.term > b.term) || +(a.term === b.term) - 1;
         })
         // insert a tag to listspan, instead of using string, this way maybe more efficient.
         .forEach(function(category) {
           var a = document.createElement('a');
           a.href = 'search/label/' + category.term;
           a.innerText = category.term;
           listspan.appendChild(a);
           listspan.appendChild(document.createElement('br'));
           lst.push(category.term);
         });

       // insert the list to DOM
       document.getElementById('container').appendChild(listspan);
      }
    </script>
    <div id="container"></div>
    <script src="http://www.chordzone.org/feeds/posts/summary?alt=json&max-results=0&callback=cat"></script>
  </body>
</html>

Can you include this in my code and help me fix it? I'm pretty new to this so not sure how to include it. — Chordzone.org, Jun 21 '16 at 13:34
Use [this](https://jsfiddle.net/77s6qfzc/2/), and replace your `cat` function with the `cat` function in JSFIDDLE. Also you need change HTML tag `` to `
`, this will reduce DOM manipulation. — Haizhou Liu, Jun 21 '16 at 17:11
I edited my answer, you can copy and paste the code to a new HTML file then open the file in a browser, it should work. — Haizhou Liu, Jun 22 '16 at 17:03

Create an Index in blogger alphabetically

1 Answers1