1

Ok, so I have created a custom post type and installed the relevant REST plugins and I have a working JSON feed.

What do I do next?

Basically, I would like to display a portion of the JSON feed on an existing wordpress page, a bit like doing a wp_query I suppose.

Can this be done with AngularJS ? I haven't been able to find any useful tutorials. Any pointers to the right direction would help.

  • If you are looking for angular js pointers then this is not the correct place – bravokeyl Aug 24 '16 at 3:56
1

Unfortunately I don't know Angular to give you a hand with that, but I'm seeing this question is related to another about consuming an endpoint with a filter by meta_key (by the way, I've updated my previous response with a very simple jQuery-only code to show posts retrieved in a list).

However, if you don't mind an example with another library, I used to learn my first steps with React (lesser learning curve than Angular), a simple function to show the last published posts in a simple widget.

(function ( $ ) {
    var resourceUrl = 'http://example.com/wp-json/wp/v2/posts/';
    function refreshLastEntries() {
        var results = [];
        var link, item;
        $.get(
            resourceUrl,
            function (response) {
                console.log("Received " 
                    + response.length + " elements");
                for(item = 0; item < response.length; item++) {
                    link = React.DOM.p({}, React.DOM.a({
                        style:{"textDecoration":"none"},
                        href:response[item].link
                    }, response[item].title.rendered));
                    results.push(link);
                }
                ReactDOM.render(React.DOM.div({}, results),
                    document.getElementById('reactor'));
            }
        );
        setTimeout(refreshLastEntries, 10000);  
    }
    refreshLastEntries();

})(jQuery);

If you really want learn to use the REST API with Angular, I recommend you again visit the blog I've linked to you in the other question, since that lady has an entire feed about Using AngularJS and JSON API in Your WordPress Theme.

0

Yes this can be done. You will have to study $http in angular JS. Include $http in your controller or directive. Then you can do something like this below. Page ID 199 is the about page for one of my sites:

 var url = config.API_URL + "/wp-json/wp/v2/pages/199";
 $http.get(url)
   .then(function(response) {
        $scope.page = response.data;
   },
  function error(d) {
        $scope.error = true; // use to show an error message
  });

$scope.page contains the data from your page. Then in your html you can show it like this:

 <h1>{{page.title}}</h1>
 <div>{{page.content}}</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.