Пользовательская конечная точка Wordpress rest API с использованием литерала шаблона Jquery .get JSON, проблема с тем, что не отображается только один элемент - PullRequest
Новая
       52

Пользовательская конечная точка Wordpress rest API с использованием литерала шаблона Jquery .get JSON, проблема с тем, что не отображается только один элемент

0 голосов
/ 08 мая 2020

Итак, чтобы глубже погрузиться в то, что говорится в моем заголовке, в настоящее время я пытаюсь отобразить через настраиваемую конечную точку, которую я создал в API отдыха wordpress. Я могу получить то, что мне нужно, за исключением одной части, которая всегда остается неопределенной. Я считаю, что просто ввожу то, что считаю правильным синтаксисом, неправильно каждый раз вызывая неопределенный результат. Вот настраиваемая конечная точка для поискового запроса одного места от почтальона. Код, который я пытаюсь перевести из JSON в шаблонный литерал, является частью галереи, и я прокомментирую это подробнее после раздела кода ниже: 

[
    {
        "ID": 75,
        "post_author": "1",
        "post_date": "2020-04-29 19:28:38",
        "post_date_gmt": "2020-04-29 19:28:38",
        "post_content": "<!-- wp:quote -->\n<blockquote class=\"wp-block-quote\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></blockquote>\n<!-- /wp:quote -->",
        "post_title": "Ogden St.",
        "post_excerpt": "",
        "post_status": "publish",
        "comment_status": "closed",
        "ping_status": "closed",
        "post_password": "",
        "post_name": "ogden-st",
        "to_ping": "",
        "pinged": "",
        "post_modified": "2020-05-07 19:09:42",
        "post_modified_gmt": "2020-05-07 19:09:42",
        "post_content_filtered": "",
        "post_parent": 0,
        "guid": "http://olson-landscaping.local/?post_type=project&#038;p=75",
        "menu_order": 0,
        "post_type": "project",
        "post_mime_type": "",
        "comment_count": "0",
        "filter": "raw",
        "acf": {
            "acreage": "1.4 Acres",
            "completed": "2017",
            "days_sun": "17",
            "photo": "http://olson-landscaping.local/wp-content/uploads/2020/04/ogdenST.png"
        },
        "link": "http://olson-landscaping.local/projects/ogden-st/",
        "image": "http://olson-landscaping.local/wp-content/uploads/2020/04/ogdenST.png",
        "gallery": [
            {
                "id": 82,
                "title": "2018-07_large-yard-landscape-designers-daybreak",
                "caption": "",
                "full_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-scaled.jpg",
                "thumbnail_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-150x150.jpg",
                "large_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-1024x768.jpg 1024w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-300x225.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-768x576.jpg 768w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-1536x1152.jpg 1536w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-2048x1536.jpg 2048w",
                "medium_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-300x225.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-1024x768.jpg 1024w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-768x576.jpg 768w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-1536x1152.jpg 1536w, http://olson-landscaping.local/wp-content/uploads/2020/04/2018-07_large-yard-landscape-designers-daybreak-2048x1536.jpg 2048w",
                "url": "",
                "target": ""
            },
            {
                "id": 84,
                "title": "647a097e8b23088f485a848284dae811",
                "caption": "",
                "full_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811.jpg",
                "thumbnail_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811-150x150.jpg",
                "large_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811.jpg 1024w, http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811-300x240.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811-768x614.jpg 768w",
                "medium_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811-300x240.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811-768x614.jpg 768w, http://olson-landscaping.local/wp-content/uploads/2020/04/647a097e8b23088f485a848284dae811.jpg 1024w",
                "url": "",
                "target": ""
            },
            {
                "id": 85,
                "title": "landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059",
                "caption": "",
                "full_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059.jpg",
                "thumbnail_image_url": "http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-150x150.jpg",
                "large_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-1024x682.jpg 1024w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-300x200.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-768x512.jpg 768w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-1536x1024.jpg 1536w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-2048x1365.jpg 2048w",
                "medium_srcset": "http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-300x200.jpg 300w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-1024x682.jpg 1024w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-768x512.jpg 768w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-1536x1024.jpg 1536w, http://olson-landscaping.local/wp-content/uploads/2020/04/landscape-curb-appeal-retina_retina_f09021ca6edac80b70f3a5b5092c4059-2048x1365.jpg 2048w",
                "url": "",
                "target": ""
            }
        ]
    }
]

Теперь вот код, который я написал чтобы отобразить его в div на моей странице: 

    $menuPosts =  $("#search-section");
    $('.getResults').on("click", function(e) {
      //console.log("im clicked");
      //console.log($(this).prop("value"));
      $.getJSON('http://olson-landscaping.local/wp-json/wp/v1/projects?s=' + $(this).prop("value"), posts => {
        $menuPosts.html(`
          ${posts.map(item => `


            <div class="projectFeaturedImage" style="background-image:url(${item.image});"></div>

            <p class="projectTitle">${item.post_title}</p>

            <div class="projectDescription">
              <div class="projectDescription__top">
                <div class="projectDescription__title">
                  <p>project profile</p>
                  <img src="https://olson-landscaping.flywheelsites.com/wp-content/themes/olson/resources/images/logoGreenSmall.png">
                  <p>form o.l. 1298_1</p>
                </div><!-- projectDescription__title close -->

                <div class="projectDetails">
                  <div class="projectDetail">
                  <p class="projectDetail__title">Title</p>
                  <p class="projectDetail__content">${item.post_title}</p>
                  </div>
                  <div class="projectDetail">
                  <p class="projectDetail__title">Acreage</p>
                  <p class="projectDetail__content">${item.acf.acreage}</p>
                  </div>
                  <div class="projectDetail">
                  <p class="projectDetail__title">Completed</p>
                  <p class="projectDetail__content">${item.acf.completed}</p>
                  </div>
                  <div class="projectDetail">
                  <p class="projectDetail__title">Days of Sun</p>
                  <p class="projectDetail__content">${item.acf.days_sun}</p>
                  </div>
                </div>

                <div class="projectContent">
                  <p class="projectDetail__title">Project Notes</p>
                  ${item.post_content}
                </div>

              </div>
              <div class="projectDescription__bottom">scroll for more <img src="https://olson-landscaping.flywheelsites.com/wp-content/themes/olson/resources/images/arrowUp.png"></div>
            </div>

            <div class="projectFeaturedImage projectGallery" style="background-image:url(${item.gallery.full_image_url});"></div>
            <div class="projectEnd"><p>the end</p></div>


          `).join('')}
        `);
      });

    }); //json request close

Также, как еще одно примечание, вот мои функции. php код для добавления в настраиваемую конечную точку, не уверен, что это будет помочь потенциально изменить вывод конечной точки для галереи 


function project_endpoint( $request_data ) {
// setup query argument
$args = array(
'post_type' => 'project',
'posts_per_page'=> -1,
'numberposts'=> -1,
's' => $request_data['s'],
);

// get posts
$posts = get_posts($args);

// add custom field data to posts array
foreach ($posts as $key => $post) {
$posts[$key]->acf = get_fields($post->ID);
$posts[$key]->link = get_permalink($post->ID);
$posts[$key]->image = get_the_post_thumbnail_url($post->ID);
$posts[$key]->gallery = acf_photo_gallery('gallery', $post->ID);
}


return $posts;
}

// register the endpoint
add_action( 'rest_api_init', function () {
register_rest_route( 'wp/v1', '/projects/', array(
'methods' => WP_REST_Server::READABLE,
'callback' => 'project_endpoint',
)
);
});

Все выходит отлично, за исключением части галереи внизу в последнем div "projectFeaturedImage" с ${item.gallery.full_image_url}

Также примечание: я хочу, чтобы каждое изображение отображалось для каждого сообщения, а не только одно из трех, доступных в этом примере, показанном.

Может ли кто-нибудь помочь мне получить правильный синтаксис Вот? Я мог бы написать это и в PHP, но я действительно хочу, чтобы это было ajax, а не анимация, чтобы каждый из них был на странице. Любая помощь приветствуется. Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...