Manipulate Data with JSON using Angular JS for WordPress JSON API

Question

I tested code in this post and modified a bit for my use. But I cannot get JSON object from API of my blog that I have generated using WordPress JSON plugin.

URL API from BLOG (NOT WORKING): http://teckstack.com/api/get_recent_posts
URL from W3C example (WORKING): http://www.w3schools.com/website/Customers_JSON.php

I stuck when tried to manipulated JSON API from my blog (mentioned above) and the same code worked for the other url provided by w3c example?

Please provide your suggestion.

I am using below codes in .html file and not in WordPress environment.

==== Angular JS Script ====

(function() {
    var app = angular.module('tsApp', []);
    app.controller('TSController', function($scope, $http) {
        $scope.heading = [];
        $http({
            method: 'GET',
            url: 'http://teckstack.com/api/get_recent_posts'
        }).success(function(data) {
            console.log("pass");
            $scope.heading = data; // response data 
        }).error(function(data) {
            console.log("failed");
        });
    });
})();

==== HTML ====

<html ng-app="tsApp">
<body ng-controller="TSController as tsCtrl">
        <article class="main-content" role="main">
            <section class="row">
                <div class="content">
                    <div class="name-list">
                        <h1>Dummy Title</h1>
                        <ul>{{ 1+1 }} (Testing AJS is working)
                            <li ng-repeat="title in heading" class="">
                                <h3>{{title.Name}}</h3>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
        </article>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>

I am raising this question after checking for all solution online https://stackoverflow.com/a/26898082/1841647 and http://www.ivivelabs.com/blog/fix-cross-domain-ajax-request-angularjs-cors/ But nothing worked for me.

Creating JSFiddle for your convenience: http://jsfiddle.net/236gdLnt/

eladcon · Accepted Answer · 2015-03-28 18:55:38Z

1

It's a cross-domain issue. You can get the first url data by rquesting it with JSONP. Angular support it with the $http.jsonp method:

$http.jsonp('http://teckstack.com/api/get_recent_posts?callback=JSON_CALLBACK')
   .success(function (data1) {
        console.log("BLOG pass");
        $scope.heading1 = data1; // response data 
    }).error(function (data1) {
        console.log("BLOG failed");
    });

Make sure you add the callback=JSON_CALLBACK parameter to your url.

edited Mar 28, 2015 at 18:55

answered Mar 28, 2015 at 18:37

eladcon

5,8251 gold badge18 silver badges19 bronze badges

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

4 Comments

Kushal Jayswal Over a year ago

I tried as you suggested but not working :(. Updating fiddle: jsfiddle.net/236gdLnt/1

eladcon Over a year ago

you didn't switch to the $http.jsonp method. check this fiddle: jsfiddle.net/8r17vcg7

Kushal Jayswal Over a year ago

Oh! Silly mistake. That's working now. Great help. Can you tel me specific link which can guide step by step to manipulate WordPress JSON API with AngularJS for HTML project?

Kushal Jayswal Over a year ago

One important input - if there is a cross origin error then we can use https://crossorigin.me/ as a prefix to API url. (i.e: https://crossorigin.me/http://teckstack.com/api/get_recent_posts?callback=JSON_CALLBACK

Collectives™ on Stack Overflow

Manipulate Data with JSON using Angular JS for WordPress JSON API

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related