Cordova App mit WP REST API – Alle Beiträge laden und Ausgabe des Inhalts

25. April 2017 - AngularJS, Apps, Cordova, Ionic, REST API, Wordpress

In diesem Beitrag möchte ich die App dann doch endlich mal um das eigentlich wichtige erweitern und zwar um die Beiträge selbst, also um den Inhalt. Wir müssen also aus dem Ergebnis unserer WP REST API Anfrage neben der bisher extrahierten Überschrift, der ID und dem Titelbild noch den Einleitungs (Excerpt) Text rausholen und den Content.

Hierfür erweitern wir unsere for Loop über die response.data um die zwei folgenden Zeilen:

excerpt: response.data[i].excerpt.rendered,
content: response.data[i].content

Die zwei Zeilen müssen in den $scope.article.push eingefügt werden, da wir diese ja in unserem eigens für die Ausgabe angelegten Array haben wollen.

Unsere komplette getArticles Funktion sieht dann jetzt so aus:

$scope.getArticles = function() {      
      console.log("get articles");
      $scope.progressbar.setParent(document.getElementById("progressContainer")); 
      $scope.progressbar.start();
      $scope.articles = [];
        
        $http({
          method: 'GET',
          url: 'http://bestezeitung.de/wp-json/wp/v2/posts?_embed',
          headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        }).then(function successCallback(response) {
          console.log("success");
          console.log(response);
          for(var i = 0; i < response.data.length; i++) {
            var imageUrl;
            var featuredMedia = response.data[i]._embedded["wp:featuredmedia"];
              if(featuredMedia == undefined) {
                imageUrl = "";
              } else {
                imageUrl = response.data[i]._embedded["wp:featuredmedia"][0].source_url;
              }

              $scope.articles.push({
                id: response.data[i].id,
                title: response.data[i].title.rendered,
                image: imageUrl,
                excerpt: response.data[i].excerpt.rendered,
                content: response.data[i].content
              });

          } // Ende For
          $scope.progressbar.complete();
                    
        }, function errorCallback(response) {
          console.log("error");
          console.log(error);
        });        
    };

 

Achtung!
Wer sich einmal das Objekt genauer anschaut, welches die WP REST API liefert, wird vermutlich etwas erstaunt sein, was das excerpt genau liefert. Und zwar den gewünschten Text in einem <p> Tag. Fragt mich nicht, warum das so ist. Gut ist es auf jeden Fall nicht, da genau dieses <p> Tag um unseren Content herum mit ausgegeben und nicht als HTML Tag interpretiert wird. Glücklicherweise gibt es viele schlaue Leute auf Stackoverflow. Und einer von diesen hat einen Beitrag verfasst, der unser Problem löst.
Es gibt nämlich einen AngularJS Filter, der HTML Tags entfernt. Dieser sieht so aus:

.filter('htmlToPlaintext', function() {
    return function(text) {
      return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
  })

Den müsst ihr einfach oberhalb der ganzen Controller in eure controller.js Datei einfügen und könnt dann eure HTML Sachen filtern. Hierfür verwendet ihr sogenannte Pipes |
Mein gefiltertes Excerpt sieht dann in der beste.html Datei so aus:

<p>{{article.excerpt | htmlToPlaintext}}</p>

Achtung!!
Natürlich wäre das Leben zu einfach, wenn jetzt alles funktionieren würde. Wer einen Blick auf das Ergebnis wirft, wird vermutlich ebenfalls etwas verwundert darüber sein, dass unser Excerpt abgeschnitten ist. Das ist dann die Ironie des Lebens. Ein bereits abgeschnittener und gekürzter Inhalt wird noch einmal eingeschränkt und zwar durch unser <ion-item>.
Auch hier wieder ein großes Dank an Stackoverflow und den User, der die passende Antwort gegeben hat.
Wir müssen unserem <ion-item> noch zwei CSS Klassen mitgeben. Und zwar item und item-text-wrap. Das sorgt dafür, dass unser <p> Tag umgebrochen wird, wenn es zu lang wird.

Hier also noch das komplette <ion-item>

<ion-item ng-repeat="article in articles" ng-href="#/app/beste/{{article.id}}" ng-if="$index <= (articles.length/2)" class="articleContainer item item-text-wrap">
        <h1 class="articleH1">{{article.title}}</h1>
        <img ng-src="{{article.image}}" class="articleImg">
        <p>{{article.excerpt | htmlToPlaintext}}</p>
      </ion-item>

Ich habe dem p Tag dann noch die Klasse colroBlack mitgegeben und einfach die Schriftfarbe auf Schwarz gesetzt.

Ausgabe aller/beliebig vieler Beiträge

Der ein oder andere hat sicherlich schon gemerkt, dass die WP REST API normal nur zehn Beiträge ausgibt. Etwas blöd also, wenn man mehr als nur zehn Beiträge auf seiner Seite verfasst hat.
Ich muss zugeben, dass ich leider nicht weiß, wie man seine gesamten Beiträge ausgibt. Ich weiß aber, wie man eine konkrete Zahl an gewünschten Beiträgen ausgibt. Hierfür gibt es den Befehl per_page=x also zum Beispiel per_page=50.
Angeblich liefert die REST API bei -1 alle Beiträge zurück, was aber bei mir nicht funktioniert hat.

Wir dürfen aber unser _embed nicht vergessen, wodurch wir ja unsere Featured Images erhalten. Wir müssen also per_page=50&_embed verwenden, wenn wir nicht nur 50 Beiträge mit Inhalt sondern auch mit den Bildern haben möchten.
Unsere URL sieht dann so aus:

http://bestezeitung.de/wp-json/wp/v2/posts?per_page=50&_embed

Etwas unschön ist jetzt allerdings, dass die Ladezeiten sich ja noch einmal verlängern. Ich weiß noch nicht genau, wie ich damit umgehen soll. Das werde ich dann in einem der nächsten Artikel zeigen. Auf jeden Fall folgt nachher noch die Ausgabe der kompletten Artikel (samt Content) auf der Einzelseite.

Hinterlass doch ein Like :)Share on FacebookTweet about this on TwitterShare on Google+

Leave a Reply