WP API and JS : Cannot read property 'wp:featuredmedia' of undefined

wordpress json api featured image
wordpress rest api media
wp api post featured image
""wp:featuredmedia""
wordpress api get image by id
wp:featuredmedia rest_forbidden
your data _embedded wp featuredmedia 0 source_url
post wp/v2/media example

I write a component to display a list WP posts on a page build with nuxt.js and I just can not display the featured image.

The Vue Component

<template>
  <div class="references__grid">
    <div class="references__item" v-for="item in references">
        <h3><nuxt-link :to="slugToUrl(item.slug)"><h2 class="is-title">{{ item.title }}</h2></nuxt-link></h3>
        <div v-html="item.excerpt"></div>
        <div>{{ item.image }}</div>
        <strong class="more"><nuxt-link :to="slugToUrl(item.slug)">Lire la suite</nuxt-link></strong>
    </div>
  </div>
</template>

The request

  getReferences() {
    return new Promise((resolve, reject) => {
      request.defaults.baseURL = this.baseUrl;
      request.get(`posts?categories=46&per_page=6&_embedded`).then(response => {
        const data = [...response.data];
        if (response.status === 200 && response.data.length > 0) {
          const filtered = {
            total: response.headers["x-wp-total"],
            totalPages: response.headers["x-wp-totalpages"],
            data: data.map(item => ({
              id: item.id,
              title: item.title.rendered,
              content: item.content.rendered,
              excerpt: item.excerpt.rendered,
              slug: item.slug,
              image: item._embedded["wp:featuredmedia"][0].media_details.sizes.full.source_url
            }))
          };
          resolve(filtered);
        } else {
          reject(response);
        }
      });
    });
  },

The WP Api seems ok: https://www.agencedebord.com/wp-json/wp/v2/posts?categories=46&per_page=61&_embed

The error message:

ERROR

TypeError: Cannot read property '0' of undefined

  • server-bundle.js:1525 filtered.data.data.map.item server-bundle.js:1525:56

  • Array.map

  • server-bundle.js:1519 >__WEBPACK_IMPORTED_MODULE_1_axios___default.a.get.then .response server-bundle.js:1519:24

  • next_tick.js:160 process._tickCallback internal/process/next_tick.js:160:7

So why item._embedded is undefined? There is no problem for item.id or item.slug... any clarification is appreciated.


Finally, I did not use "_embed" but I add a new endpoint following this answer : Get Image URL instead of Attachment Id in Rest API

Cannot read property 'rendered' of undefined · Issue #142 · postlight , js to see if the apiUrl matches the domain where your WordPress install is. Normally when I'm working on this repo I separate out the WordPress  Agreed. All of the DataTables extras need to be updated for RequireJS. I will be adding that in the next major release for each plug-in. I'll leave this bug open for the moment to remind me to do exactly that, but it will likely take a little while as I'm focusing my time on DataTables core at the moment.


I think that the request url is not correct, you should use _embed not _embedded

So it will be request.get(posts?categories=46&per_page=6&_embed)

Otherwise, the _embedded part will be missing in the json response.

“Cannot read property 'doAction' of undefined”, [This thread is closed.] When I have Imagify enabled I get this console error in admin: Uncaught TypeError: Cannot read property… TypeError: Cannot read property 'wp:featuredmedia' of undefined. How to render WP Rest-API Endpoints in a React.js Theme with Woocommerce. 0. localize_script or


The problem is sometimes item._embedded['wp:featuredmedia'] is returning undefined, you can confirm you get that by console.log(item._embedded['wp:featuredmedia']), the solution for that by wrapping it in if condition, if it not undefined to proceed if(item._embedded['wp:featuredmedia']){ return let imageUrl = item._embedded["wp:featuredmedia"][0].media_details.sizes.full.source_url } else { return null}

[Vue warn]: Error in render: "TypeError: Cannot read property 'wp , [Vue warn]: Error in render: "TypeError: Cannot read property 'wp:featuredmedia' of undefined - REST API · javascript rest-api. I'm using this code  I've read and understood the contribution guidelines. I've searched for any related issues and avoided creating a duplicate issue. Please give us a description of what happened. After updating to Wordpress 5.3 I have encountered two main


I had one post that was giving this error. I had the if/else setup properly but it was still erroring. I went to the problem post and resaved the featured image and also changed to the ajax to load .full.source_url instead of .medium.source_url and that fixed the error.

WP API and JS : Cannot read property 'wp:featuredmedia' of undefined, I write a component to display a list WP posts on a page build with nuxt.js and I just can not display the featured image. The Vue Component I'd suggest you look into plugin conflicts, because that wp.model is a global WordPress sets on post screens. mikejolley added a commit that referenced this issue Feb 26, 2016 Add 'media-models' dependency …


@ptim/gatsby-source-wordpress, In your gatsby-config.js module.exports = { plugins: [ /* * Gatsby's data processing layer If your site is hosted on wordpress.org, then set this to false. See ~​TypeError - Cannot read property 'id' of undefined with WordPress.com~ in the  react-dom.min.82e21c65.js:110 TypeError: Cannot read property 'rest_base' of undefined Looks like something related to the REST API, something (a plugin, a


Uncaught TypeError: Cannot read property '$el' of undefined , Uncaught TypeError: Cannot read property '$el' of undefined. Wordpress Site, Yoo Pro is Up To Date, Also running Toolset. No idea what's  TypeError: Cannot read property 'getCollectionByRoute' of undefined Please describe what you expected to happen and why. I expect to be able to edit my post, which is no longer possible.


Uncaught typeerror cannot read property api of undefined, An example will be: Uncaught TypeError: Cannot read property 'value' of null. to show data from a JSON object in the content section of a WordPress website.