5202

ein Blog über technische Fragen zu Blogger

Retrieving labels from Blogger JSON feed

von

Ich wurde gefragt, wie man Post-Labels aus dem Blogger JSON Feed zieht. Das Problem dabei ist, dass ein Post mehr als ein Label haben kann, ihr folglich nicht ein einzelnes Objekt, sondern ein ganzes Array als Rückgabe habt.

Starten wir mit einer Liste von Post-Titel aus dem JSON Feed:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var posttitle = data.feed.entry[i].title.$t;
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Wie definieren nun ein leeres Array als Variable:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

In einer weiteren Schleife iterieren wir jeden Post durch alle Labels:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      for(var j = 0; j < data.feed.entry[i].category.length; j ++ ){
      }
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Wir hängen nun jedes Label in das Array ein:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      for(var j = 0; j < data.feed.entry[i].category.length; j ++ ){
        labels.push(data.feed.entry[i].category[j].term); // append the label to collection
      }
      htmlCode  = "<li><h3 class='posttitle'>"  + posttitle +  "</h3></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Letzter Schritt - wir lesen das Array aus und fügen es in die Liste ein:

$.ajax({
  url: "http://euerBlog.blogspot.com/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i ++ ){
      var labels = []; // collect labels here
      var posttitle = data.feed.entry[i].title.$t;
      for(var j = 0; j < data.feed.entry[i].category.length; j ++ ){
        labels.push(data.feed.entry[i].category[j].term);
      }
      htmlCode  = "<li><h3 class='posttitle'>" +  posttitle  + "</h3><h5 class='label'>" + labels.join(', ') +  "</h5></li>";
    }
    htmlCode  = "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  }
});

Ich habe außerdem ein funktionierendes Beispiel auf CodePen gebaut.

See the Pen labels from Blogger json-feed by oliver (@5202) on CodePen.

Fehler, weiter Beispiele, Probleme - schreibt einfach einen Kommentar!