JSFiddle - React, Tailwind, and code Playground

by zerippe

HTML

<div id="test"></div>

JavaScript

var callback = function(data) {
    if (typeof data.feed.entry == "undefined" || data.feed.entry.length == 0) return;
    
    var entries = [];

    for (var i = 0, length = data.feed.entry.length; i < length; i++) {
        var entry = data.feed.entry[i];
        entries.push({
            title: entry.title.$t,
            url: (function() {
                for (var j = 0, length = entry.link.length, link = entry.link; j < length; j++) {
                    if (link[j].rel == "alternate") {
                        return link[j].href;
                    }
                }
                return "";
            })(),
            category: (function() {
                if (typeof entry.category == "undefined") return "カテゴリ未設定";
                return entry.category[0].term;
            })()
        });
    }
    
    entries.sort(function(a, b) {
        if (a.category < b.category) return -1;
        if (a.category > b.category) return 1;
        return 0
    });
    
    var activeCategory = entries[0].category, startIndex = 0;
    var li = "";
    for (var i = 0, length = entries.length; i < length; i++){
        var entry = entries[i];
        if(activeCategory != entry.category){
            $("#test").append("<h2>" + activeCategory + " (" + (i - startIndex) + ")</h2><ol>" + li + "</ol>");
            activeCategory = entry.category;
            startIndex = i;
            li = "";
        }
        li += "<li><a href=\"" + entry.url + "\">" + entry.title + "</a></li>";
    }
}

$.ajax({
    type: "get", dataType: "jsonp",
    url: "https://www.blogger.com/feeds/5129191888080362196/posts/summary",
    data: {
        redirect: "false", "max-results": 500, alt: "json"
    },
    success: callback
});