WP-json is not displaying with angularJS

Question

I want to display my posts of WordPress with the installed plugin WP-REST v2 to GET the data from trough AngularJS BUT theres a Problem. I can't display it and coded according to this article.

https://amielucha.com/angularjs-json-rest-api-with-wordpress

So my main topic is how to to this with angularjs.

These are my codes:

app.js:

(function() {
var app = angular.module('app', ['ngRoute']),
    api = {};

// JSON content Location
api.query = 'http://myy.website/dlrz/wp-json/wp/v2/posts/';

app.config([ '$routeProvider', '$locationProvider', '$qProvider', function($routeProvider, $locationProvider, $qProvider) {
    // Enable HTML5 Mode
    $locationProvider.html5Mode(true);

    // configure routing
    $routeProvider
        .when('/', {
        templateUrl: myLocal.partials + 'main.html',
        controller: 'Main'
    });

    $qProvider.errorOnUnhandledRejections(false);
}]);

// Set Controller and get JSON-Data
app.controller('Main', [ '$scope', '$http', '$routeParams', '$sce', function($scope, $http, $routeParams, $sce) {
    $http.get(api.query).then(function(res){
        $scope.posts = res;
        // interate through each field to set it as trusted
        angular.forEach(res, function(value, key) {
            // trust each title and excerpt in the object
            this[key].title.rendered = $sce.trustAsHtml(value.title.rendered);
            this[key].excerpt.rendered = $sce.trustAsHtml(value.excerpt.rendered);
        }, $scope.posts);
        console.log($scope.posts);
        console.log($sce);

    });
}]);
})();

main.html:

<section>
<article class="well" ng-repeat="post in posts">
    <header>
        <h1 ng-bind-html="post.title.rendered">
            {{post.title.rendered}}
        </h1>
    </header>
    <div class="post-content" ng-bind-html="post.excerpt.rendered">
        {{post.excerpt.rendered}}
    </div>
</article>

index.php:

    <?php /*get_header(); */?>


<!DOCTYPE html>
<html ng-app="app">

    <head>
        <!-- Required meta tags always come first -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <base href="<?php echo site_url();?>/">

        <title>
            <?php bloginfo( 'name'); ?>
        </title>
        <?php wp_head(); ?>
    </head> 
    <body>   
        <h1>Hello World!</h1>

        <div ng-view></div>


        <footer>
            &copy; <?php echo date( 'Y' ); ?> Dart Liga Verband Zürich
        </footer>

    </body>
</html>     
<?php wp_footer(); ?>
<?php/* get_footer(); */?>

this is the json file: http://myy.website/dlrz/wp-json/wp/v2/posts

Is there any Error you get or Have you checked whats the console.log for $scope.posts ? — Vinod Louis
– Vinod Louis, Commented Dec 9, 2016 at 8:13
After resolving promise from $http.get, you're immediately setting $scope.posts = res. You don't want to do this if you're looping through the results later. What part doesn't work? Fetching data? Displaying it in the view? — Perttu Haliseva
– Perttu Haliseva, Commented Dec 9, 2016 at 8:37
I removed $scope.posts but now i can't display it on the view and you can see in the console: myy.website/dlrz — Hanan Mufti
– Hanan Mufti, Commented Dec 9, 2016 at 8:43

jtsnr · Accepted Answer · 2016-12-09 08:42:28Z

1

The problem is in how you get the data from the response. You are using

$scope.posts = res;

but it should be

$scope.posts = res.data;

answered Dec 9, 2016 at 8:42

jtsnr

1,22012 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

WP-json is not displaying with angularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related