Получить одну запись из списка записей с помощью REST API.

Содержание

Вопрос или проблема
Ответ или решение
Теория
Пример
Применение
Заключение

Вопрос или проблема

Я новичок в WP REST API и пытаюсь получить один пост из CPT из списка постов. С помощью приведенного ниже кода (который я сократил) я могу вернуть данные JSON из 10 постов, отображенных на экране, из которых я могу выбрать нужные поля. Но как мне вернуть только один пост, когда он выбран, т.е. элемент ‘postTitle’? Заранее большое спасибо.

function displaySingleRole() {

let postData = document.getElementById( 'postTitle' );

if (postData) {
  
  fetch( '/wp-json/wp/v2/my_posts/' )
    .then( function( response ) {
    return response.json();
  })
    .then( function( data ) {
    console.log( data );
  })
    .catch( function( error ) {
    console.log( error );
  });
}}

Ответ или решение

Фетчинг отдельного поста из списка постов через REST API в WordPress может казаться сложной задачей, особенно для тех, кто только начинает знакомиться с этим инструментом. Однако, по сути, это довольно прямолинейный процесс, если учитывать структуру REST API и особенности работы с ним.

Теория

Прежде чем углубляться в примеры, стоит разобраться с теорией и архитектурой REST API. REST (Representational State Transfer) — это архитектурный стиль, который использует стандартные HTTP-методы, такие как GET, POST, PUT, DELETE, для выполнения операций CRUD (создание, чтение, обновление, удаление). В контексте WordPress, REST API предоставляет возможность взаимодействовать с контентом сайта на стороне сервера посредством HTTP-запросов.

Когда мы говорим о фетчинге данных, основным методом является GET. Это запрос, который используется для получения данных из API. В вашем случае, вам нужно получить данные одного конкретного поста. В WordPress для этого стандартно используется URL-структура /wp-json/wp/v2/{тип_контента}/{ID}, где {тип_контента} — это ваш тип записи (например, posts, pages, custom_post_type и т.д.), а {ID} — это уникальный идентификатор поста, который вы хотите получить.

Пример

Рассмотрим, как может выглядеть код для реализации данной задачи. Предположим, что ваш кастомный тип поста называется my_posts, и у вас есть идентификатор поста, который нужно извлечь. Для этого вам нужно изменить URL в вашем fetch-запросе, добавив идентификатор поста.

function displaySingleRole(postId) {
  // Проверяем, существует ли элемент с ID 'postTitle'
  let postData = document.getElementById('postTitle');

  if (postData && postId) {
    fetch(`/wp-json/wp/v2/my_posts/${postId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        console.log(data); // Здесь можно обработать и отобразить конкретные данные поста
        // Например, отобразим заголовок и контент в элементе
        postData.innerHTML = `<h1>${data.title.rendered}</h1><div>${data.content.rendered}</div>`;
      })
      .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
      });
  } else {
    console.error('No post ID provided or postTitle element not found.');
  }
}

Применение

Идентификация: Первое, что вам нужно сделать, это получить ID поста, который вы хотите извлечь. Это можно реализовать, например, через взаимодействие с пользователем, где пользователь выбирает пост, и ваш код сохраняет ID выбранного поста.
Фетч-запрос с использованием ID: Как только у вас есть ID, вы можете использовать его в GET-запросе, чтобы получить данные только об этом конкретном посте. В коде выше postId передается как аргумент функции displaySingleRole, что позволяет гибко извлекать данные разных постов по мере необходимости.
Обработка данных: После получения данных из API, вам нужно будет соответствующим образом их обработать и вывести пользователю. В примере вывод заголовка и контента поста происходит в HTML элемент с ID postTitle.
Обработка ошибок: Не забывайте обрабатывать потенциальные ошибки, которые могут возникнуть в процессе выполнения запроса. Это включает как сетевые ошибки, так и ошибки обработки JSON. Использование catch и проверка ответа через response.ok помогут вам справиться с неожиданными ситуациями.
Оптимизация производительности: Убедитесь, что вы не перегружаете ваш API избыточными запросами, используя такие техники, как кэширование результатов или дебаунсинг событий, которые инициируют запросы.

Заключение

Работа с REST API WordPress для получения данных отдельных постов требует понимания архитектуры API и корректного применения HTTP-запросов. Следуя вышеописанным шагам, вы сможете эффективно извлекать и отображать данные нужного вам контента. Обратите внимание, что безопасность также имеет значение. Убедитесь, что ваши запросы защищены (например, путем проверки прав доступа) и передаются по HTTPS, чтобы предотвратить утечки данных.