ssue with WordPress REST API: Posts Not Visible in?Mobile?App

Display Recent WordPress Posts

We are using this code

<script>
    // URL of your WordPress site's REST API endpoint for posts
    const apiUrl = 'https://creativeedu.in/wp-json/wp/v2/posts?per_page=4&_embed';

    // Element where you want to display the posts
    const postsContainer = document.getElementById('posts-container');

    // Function to fetch and display recent WordPress posts
    async function fetchAndDisplayRecentPosts() {
        try {
            const response = await fetch(apiUrl);
            const posts = await response.json();

            // Loop through the recent posts and create HTML elements
            posts.forEach(post => {
                const postElement = document.createElement('div');
                postElement.innerHTML = `
                    <h2>${post.title.rendered}</h2>
                    <p>${post.content.rendered}</p>
                    <img src="${post._embedded['wp:featuredmedia'][0].source_url}" alt="${post.title.rendered}" />
                `;
                postsContainer.appendChild(postElement);
            });
        } catch (error) {
            console.error('Error fetching posts:', error);
        }
    }

    // Call the function to fetch and display recent posts
    fetchAndDisplayRecentPosts();
</script>

The script causes a JavaScript error because a field expected by the script does not (or no longer) exist in the return of the API. The message is:

Error fetching posts: TypeError: post._embedded['wp:featuredmedia'] is undefined

The _embedded property still exists. However, the entry “wp:featuredmedia” does not. I would recommend that you check this in your code. How to do this is described here, for example: https://stackoverflow.com/questions/48916466/wp-api-and-js-cannot-read-property-wpfeaturedmedia-of-undefined

Thanks to your help, the issue has been fixed!

Here’s the updated code.

Display Recent WordPress Posts

<script>
    const apiUrl = 'https://creativeedu.in/wp-json/wp/v2/posts?per_page=4&_embed';
    const postsContainer = document.getElementById('posts-container');

    async function fetchAndDisplayRecentPosts() {
        try {
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error('Failed to fetch posts');
            }
            const posts = await response.json();

            // Loop through the recent posts and create HTML elements
            posts.forEach(post => {
                const postElement = document.createElement('div');

                const title = document.createElement('h2');
                title.textContent = post.title.rendered;
                postElement.appendChild(title);

                const content = document.createElement('p');
                content.textContent = post.content.rendered;
                postElement.appendChild(content);

                // Check if featured media is available
                if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0].source_url) {
                    const image = document.createElement('img');
                    image.src = post._embedded['wp:featuredmedia'][0].source_url;
                    image.alt = post.title.rendered;
                    postElement.appendChild(image);
                }

                postsContainer.appendChild(postElement);
            });
        } catch (error) {
            console.error('Error fetching or displaying posts:', error);
        }
    }

    fetchAndDisplayRecentPosts();
</script>

Yes, that looks better. Nice if I could help. You are welcome to set the topic to solved.