1

I am trying to display a list of posts using json and jquery.

This is what I am using to fetch the data

var app = {

    init: function() {
        app.getPosts();
    },

    getPosts: function() {

        var rootURL = 'https://www.example.com/wp-json/wp/v2/posts';

        $.ajax({
            type: 'GET',
            url: rootURL,
            dataType: 'json',
            success: function(data){

                $.each(data, function(index, value) {
                    console.log(value.featured_image);
                  $('ul.topcoat-list').append('<li class="topcoat-list__item">' +
                    '<h3>'+value.title+'</h3>' +
                    '<p>'+value.excerpt+'</p></li>');
                    ;
                });
            },
            error: function(error){
                console.log(error);
            }

        });

    }

}

but this code just returns following output

but when I go to https://www.example.com/wp-json/wp/v2/posts I see the perfect array.

the example of an array there

{
    "id":2267,
    "type":"post",
    "title":{"rendered":"When to visit Arugam Bay? &#8211; Arugam Bay Weather &#038; Seasons \u2013"},
    "content":{"rendered":"<div class=\"circle-headline\">\n<p>The right answer is<\/p>\n<\/div>\n<p class=\"wpk-circle-title text-custom\">ALL YEAR LONG!<\/p>\n<p>You can visit Arugam Bay anytime and always find amazing sunny weather. Despite this incredible where, there is a high and low season.<\/p>\n","protected":false},
    "excerpt":{"rendered":"<p>The right answer is<\/p>\n<p>ALL YEAR LONG!<br \/>\nYou can visit Arugam Bay anytime and always find amazing sunny weather. Despite this incredible where, there is a high and low season.<\/p>\n","protected":false},
    "author":1,
    "featured_media":2268,
    "comment_status":"open",
    "ping_status":"open",
    "sticky":false,
    "template":"",
    "format":"standard",
}

How can I get the title and excerpt from there and show a list using it?

0

1 Answer 1

4

Access the rendered property that contains the actual string:

'<h3>'+value.title.rendered+'</h3>' +
'<p>'+value.excerpt.rendered+'</p></li>');
...
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.