How to retrieve and render content from a remote site’s page with Web Api?

  • cwolff

    (@cwolff)


    6 years, 4 months ago

    I am a newbie with WP Web api.

    I would like to render the content of a page from a remote site on a page from my site:

    http://gscourtprobation.nashville.gov/wp-json/wp/v2/pages/34/

    How do I parse, render and embed just the content on a page on my own site? What is needed on my end to do this? Is there a javascript example? or would I need to do this in php?

    Thanks in advance for any help….

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    6 years, 4 months ago

    You can use any language available on the platform you are using. As long as it’s capable of sending HTTP requests and parsing JSON responses. On browsers that would be JavaScript or one of its variants like jQuery. Sending requests and parsing JSON is well documented on the ‘net. Just do a search. There’s nothing special about the REST API that changes anything.

    Requesting page ID 34 as in your example URL returns the page content in JSON {content: {rendered:}}. You may display that content anyway you like. For an empty content page your JS is running on, that has headers, footers, etc. but an empty content container, the JS can insert the returned content into that container.

    Thread Starter cwolff

    (@cwolff)

    6 years, 4 months ago

    I now have this working as desired. I simply used jQuery .ajax function, which parses and renders just as I needed.

    The following code grabs the content of a remote page and renders it on my site’s page:

                <script>
            $( document ).ready(function() {
            $.ajax({
               url: 'http://www.my-url/wp-json/wp/v2/pages/34/',
               error: function() {
                  $('#info').html('<p>An error has occurred</p>');
               },
               dataType: 'json',
               async: false,
               type: 'GET',  
               success: function(data) {
                 var theContent = data;
                 document.getElementById("remote-content").innerHTML = theContent.content.rendered; 
               }
            });
            });
            </script>

            <span id="remote-content"></span>

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    • This reply was modified 6 years, 4 months ago by bdbrown.
    Moderator bcworkz

    (@bcworkz)

    6 years, 4 months ago

    Nice! Thanks for sharing your solution!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to retrieve and render content from a remote site’s page with Web Api?’ is closed to new replies.