Get Comment Text via REST API

Question

A brief introduction and what does wp.apiRequest() return

wp.apiRequest() is one of the three JavaScript API written by WordPress _{(the other two JavaScript APIs are the Backbone JavaScript Client and wp.apiFetch())}, which we can use to communicate with the WordPress REST API, and as for wp.apiRequest(), it uses jQuery.ajax() which returns a jqXHR object that implements the Promise interface, giving it all the properties, methods such as .then(), and behavior of a Promise. See https://api.jquery.com/Types/#Promise

The issue with your code

Originally, I thought the AJAX request had not been resolved (or not yet complete) and thus response.responseText was an undefined, instead of a JSON-encoded string.

Demonstration of the issue:

const response = wp.apiRequest( { ... } );
// Note: That `response` is a jqXHR object.

// At this point, responseText is still an undefined.
console.log( 'before calling .then()', response.responseText, response );

response.then( ( comment, status, jqXHR ) => {
    // At this point, responseText is filled and it's a proper JSON-encoded string.
    console.log( comment, jqXHR.responseText, response.responseText );
} );

// At this point, responseText is also still an undefined.
console.log( 'after calling .then()', response.responseText, response );

But then after reading your answer or checking your code there, if you actually did something like this:

.then( function( response ) {
    // Parse the JSON response into a JavaScript object.
    response_array = JSON.parse(response.responseText);
} )

Then that response.responseText was also (likely) an undefined, because the REST API would not add such property by default, and you should have actually read it from the third parameter, i.e. the jqXHR object above.

But you don’t have to manually parse the response text into an object, because the first parameter is already an object representation of the response text.

How to properly get the comment text (the value of content.rendered) and other data

You can use .then() or these jQuery-specific methods: .done() (and .always()).

There’s already an example above, which uses .then(), but here’s another example:

wp.apiRequest(
    {
        path: 'wp/v2/comments/' + comment_id,
        method: 'POST',
        data: thedata
    }
).then(
    function ( comment ) {
        console.log( comment.content.rendered );
    }
);

If you want wp.apiRequest() to return the comment object instead of jqXHR, then you can use await and async. Here’s an example which uses IIFE (Immediately Invoked Function Expression):

async function editComment( comment_id, thedata ) {
    const comment = await wp.apiRequest(
        {
            path: 'wp/v2/comments/' + comment_id,
            method: 'POST',
            data: thedata
        }
    );

    const commentText = comment?.content?.rendered;
    console.log( commentText ); // This is logged first.

    return comment;
}

// This is an IIFE.
( async () => {
    const comment = await editComment( 123, { content: 'new content here' } );
    console.log( 'after', comment ); // This is logged after the one above.
} )();

Related Posts: