CODEWITHSUNDEEP
angularjswordpresswordpress-rest-api
James
James

Reputation: 103

How to Fetch Wordpress Post using Angular js

I 'am trying to connect my angular app to WordPress CM using wordpress rest api plugin and through $http Service However, for some reason data doesn't return.Can someone provide the correct method for retrieving data for wordpress using wordpress rest api plugin?

Below I have listed my code that includes my html and JavaScript. Also, I have listed the the local rest api that I'm trying to get my test data . 

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.2/angular-sanitize.js"></script>
</head>
<body>
<div class="masthead" np-app="myApp">
                <div class="item">
                    <div class="masthead-content">
                        <div class="copy">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-6"  ng-controller="Ctrl">
                                    <div ng-repeat="post in posts | limitTo: 1">
                                        <h2 ng-bind-html="post.title.rendered">{{posts}}</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    <script>

var app = angular.module('myApp', ['ngSanitize']);
    app.controller('myCtrl', function($http, $scope) {
        $http.get("http://localhost/wp/wp-json/wp/v2/posts/4").success(function(data) {
        $scope.posts = data;

    });
});

</script>

Upvotes: 3

Views: 931

Answers (1)

saber tabatabaee yazdi
saber tabatabaee yazdi

Reputation: 4959

I have no problem with calling rest API of WordPress 

$http.get('https://yourblog.com/wp-json/wp/v2/posts/?categories=1&per_page=2&orderby=id&order=asc&page=1').
    then(function(response) {
        console.log(response);
        $scope.posts = response.data;
    });

this code run in my AngularJS or ionic app 

<div ng-repeat="post in posts">
 <h2>{{post.title}}</h2>
</div>

Upvotes: 0

Related Questions