WP API и JS: не удается прочитать свойство wp: Featuremedia из undefined

Я пишу компонент для отображения списка сообщений WP на странице, построенной с помощью nuxt.js, и я просто не могу отобразить избранное изображение.

Компонент Vue

<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>

Запрос

  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);
        }
      });
    });
  },

WP Api выглядит нормально: https://www.agencedebord.com/wp-json/wp/v2/posts?categories=46&per_page=6&_embed

Сообщение об ошибке:

ОШИБКА

TypeError: невозможно прочитать свойство 0 из undefined

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

  • Array.map

  • server-bundle.js: 1519> __ WEBPACK_IMPORTED_MODULE

    <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>
    axios ___ default.a.get.then .response server-bundle.js: 1519: 24

  • next_tick.js: 160 process._tickCallback внутренний / процесс / next_tick.js: 160: 7

Так почему же item._embedded не определен? Нет проблем с item.id или item.slug ... любые разъяснения приветствуются.


wordpress wp-api
person Aurélien    schedule 21.02.2018    source источник

Ответы (5)


arrow_upward
1
arrow_downward

Наконец, я не использовал "_embed", но после этого ответа добавляю новую конечную точку: Получить URL изображения вместо идентификатора вложения в Rest API

person Aurélien    schedule 24.02.2018

arrow_upward
0
arrow_downward

Я думаю, что URL-адрес запроса неверен, вы должны использовать _embed, а не _embedded

Итак, это будет request.get(posts? Categories = 46 & per_page = 6 & _embed)

В противном случае в ответе json будет отсутствовать _embedded.

person Mohamed Abdelaziz    schedule 30.06.2018

arrow_upward
0
arrow_downward

Иногда проблема заключается в том, что item._embedded['wp:featuredmedia'] возвращает undefined, вы можете подтвердить, что получили это с помощью console.log(item._embedded['wp:featuredmedia']), решение для этого, заключив его в условие if, если оно не определено для продолжения if(item._embedded['wp:featuredmedia']){ return let imageUrl = item._embedded["wp:featuredmedia"][0].media_details.sizes.full.source_url } else { return null}

person Majid Eltayeb    schedule 25.09.2018

arrow_upward
0
arrow_downward

У меня было одно сообщение с этой ошибкой. У меня была правильная настройка if / else, но она все еще работала с ошибкой. Я перешел к сообщению о проблеме и повторно сохранил представленное изображение, а также перешел на ajax, чтобы загрузить .full.source_url вместо .medium.source_url, и это устранило ошибку.

person Joe Barrett    schedule 07.03.2019

arrow_upward
0
arrow_downward

Я импортировал несколько фотографий из другого WordPress. у некоторых из них не было изображений, но они так или иначе вели себя так, как будто они есть. (has_post_thumbnail () действовал таким же образом и возвращает true для этих сообщений)

Мое решение - проверить, действительно ли у них есть эскиз:

if(post.featured_media == 0 || post._embedded['wp:featuredmedia'][0].media_details == undefined){
    imageSource = null;
}
else{
    imageSource = post._embedded['wp:featuredmedia'][0].media_details.sizes.full.source_url;
}
person OuzKagan    schedule 15.06.2020