javascript - 将第二个 $.getJSON 请求与 WordPress REST API 嵌套以检索类别名称/链接

Question

我正在使用 WordPress REST API 来检索博客文章，这一切都运行良好。我有一个初始 $.getJSON 调用来检索相关帖子，然后 $.each 遍历数据以返回相关的 HTML block 以呈现到页面。

但是，我对如何实现每个帖子的类别列表有点困惑。 posts 端点仅列出类别 ID，因此我需要以某种方式查询类别端点，传入 ID，以构造类别链接。我可以在 $.each 中嵌套 $.getJSON 调用来查询该帖子的类别吗？正在努力思考如何构建它。

这是我到目前为止所拥有的(只是提取了相关代码的片段):

var state = {
    totalPages: null,
    posts: [],
    page: 1
}

getPostsByCategoryId: function getPostsByCategoryId(id, container) {

    $.getJSON('/wp-json/wp/v2/posts?filter[cat]='+id+'&filter[orderby]=title&filter[order]=ASC&filter[posts_per_page]=4&page='+state.page+'', function(data, status, xhr) {

        state.totalPages = xhr.getResponseHeader('X-WP-TotalPages');

        $.each(data, function() {
            var featuredImage = null;

            var cats = this.categories;
            var categories = [];

            // // Loop over the categories
            $.each(cats, function() {
                $.getJSON('/wp-json/wp/v2/categories/13', function(data) {
                    var categoryItem = '<a class="category" href="' + data.link + '">' + data.name + '</a>';
                    categories.push(categoryItem);
                });
            });



            var post = $('<div class="news"><div class="detail"><p class="postmeta"><a class="category" href="#">CATEGORIES</a></p><h3 class="title"><a href="' + this.link + '">' + this.title.rendered + '</a></h3><a href="' + this.link + '">View article</a></div></div>');

            state.posts.push(post);
        });

        container.append(state.posts);

        if (state.page == state.totalPages)
            $('#loadmore').addClass('disabled');

        state.page++;

    });
    return false;
}

谢谢:)

更新代码 - 无法读取未定义的属性呈现

getPostsByCategoryId: function getPostsByCategoryId(id, container) {

$.getJSON('/wp-json/wp/v2/posts?filter[cat]='+id+'&filter[orderby]=title&filter[order]=ASC&filter[posts_per_page]=4&page='+state.page+'', function(data, status, xhr) {

    state.totalPages = xhr.getResponseHeader('X-WP-TotalPages');

    $.each(data, function() {
        var featuredImage = null;

        var cats = this.categories;
        var categories = [];
        var requests = [];

        // // Loop over the categories
        $.each(cats, function() {
            var xhr = $.getJSON('/wp-json/wp/v2/categories/13', function(data) {
                var categoryItem = '<a class="category" href="' + data.link + '">' + data.name + '</a>';
                categories.push(categoryItem);
            });
            requests.push(xhr);
        });

        $.when.apply($, requests).then(function() {

            var post = $('<div class="news"><div class="detail"><p class="postmeta"><a class="category" href="#">CATEGORIES</a></p><h3 class="title"><a href="' + this.link + '">' + this.title.rendered + '</a></h3><a href="' + this.link + '">View article</a></div></div>');

            state.posts.push(post);
        });

    });


    container.append(state.posts);
    blogPostLoader.toggleLoadingIcon($('.loading i'));

    if (state.page == state.totalPages)
        $('#loadmore').addClass('disabled');

    state.page++;

});
return false;
}

Answer 1

这无法在纯 jQuery 中完成。您需要为 REST API 编写自定义端点。在此端点，您将返回每个帖子的类别。这是一个相当大的工作，有官方的 WP 教程如何向 API 添加自定义端点:

http://v2.wp-api.org/extending/adding/

我认为这会有所帮助，如果您需要更多帮助，请告诉我。