时间戳

首页 > 解决方案 > 如何在循环内循环并通过 AJAX 调用对 JSON 对象的结果进行排序？

javascript - 如何在循环内循环并通过 AJAX 调用对 JSON 对象的结果进行排序？

问题描述

我目前正在创建一个动态轮播，该轮播是通过使用来自具有以下基本结构的 JSON 对象的数据构建的：

[{
    "category": {
        "href": "somecategory/categoryid",
        "id": "somecategory/categoryid",
        "ID": "CATEGORYID01",
        "name": "Orders",
        "locale": "gb",
        "position": 2,
        "outdated": false,
        "slug": "category-1",
        "icon": ""
    },
    "articles": [{
            "href": "somearticle/articleid",
            "id": "somearticle/articleid",
            "ID": "ARTICLEID01",
            "position": 1,
            "voteUpCount": 94,
            "voteDownCount": 1105,
            "categories": [{
                "position": 1,
                "category": "CATEGORYID01"
            }],
            "keywords": [
                "Missing-order"
            ],
            "title": "Article 1 title",
            "body": "<p>article body</p>",
            "locale": "gb",
            "outdated": false,
            "slug": "article-1",
            "views": 0,
            "labelName": [
                ""
            ]
        },
        {
            "href": "somearticle/articleid",
            "id": "somearticle/articleid",
            "ID": "ARTICLEID02",
            "position": 2,
            "voteUpCount": 94,
            "voteDownCount": 1105,
            "categories": [{
                "position": 1,
                "category": "CATEGORYID01"
            }],
            "keywords": [
                "Missing-order"
            ],
            "title": "Article 2 title",
            "body": "<p>article body</p>",
            "locale": "gb",
            "outdated": false,
            "slug": "article-2",
            "views": 0,
            "labelName": [
                ""
            ]
        },
        {
            "href": "somearticle/articleid",
            "id": "somearticle/articleid",
            "ID": "ARTICLEID03",
            "position": 3,
            "voteUpCount": 94,
            "voteDownCount": 1105,
            "categories": [{
                "position": 1,
                "category": "CATEGORYID01"
            }],
            "keywords": [
                "Missing-order"
            ],
            "title": "Article 3 title",
            "body": "<p>article body</p>",
            "locale": "gb",
            "outdated": false,
            "slug": "article-3",
            "views": 0,
            "labelName": [
                ""
            ]
        }
    ]
}]

上面的结构根据有多少类别而重复，因此您有 CATEGORIES 与属于该类别的文章就在其下方（也由文章数据中的类别 ID 标识），例如，如果您有 2 个类别JSON结构将是：

[{
   "category":{},
   "articles":[{several articles here}],

   "category":{},
   "articles":[{several articles here}]
}]

我已经设法为轮播创建动态幻灯片，为 JSON 中可用的每个类别创建一张幻灯片，但现在我必须使用属于该特定类别的所有文章填充每个类别幻灯片。我用来创建幻灯片的代码如下：

function getfaqsCarousel(){
    faqsCarousel().then((data) => { // THE AJAX CALL IS ON ITS OWN SEPARATE FUNCTION ( faqsCarousel() )
        var article_data = '';
        $.each(data, function(key, value){
            var category = value.category.slug;
            var catname = value.category.name;
            var position = value.category.position;
            var catid = value.category.ID;
            var articleid = value.articles.categories.category;
            
            if (category != 'faqs-home') {
                article_data += `<div>
                    <div class="cc-box">
                        <div class="cc-hoverbox"> <span> <img alt="faqIcon" src="`+ value.category.icon +`" /> </span>
                            <h3>`+ catname +`</h3>
                            <ul class="feature-list">
                               <li>articles here</li>
                            </ul>
                        </div>
                        <a class="viewBtn" href="javascript:void(0)" data-category="`+ catid +`" data-slug="`+ category +`">See All</a> </div>
                </div>`; 
            }
        });
        
        $('.faq-slider').html(article_data);
        
        $('.faq-slider').slick({
            lazyLoad: "progressive",
            slidesToShow: 3,
            responsive: [{
                breakpoint: 768,
                settings: {
                    arrows: true,
                    centerMode: !0,
                    centerPadding: "40px",
                    slidesToShow: 1
                }
            }]
        })
    });
}
    
getfaqsCarousel();

现在，在该$.each循环中，我需要遍历每个类别的所有文章以替换部分代码<li>articles here</li>

所以我的问题是：如何遍历现有类别循环中的所有文章，同时按position每篇文章中可用的属性对结果进行排序？

提前感谢您的时间。

标签： javascriptjqueryjsonajaxapi

解决方案

function getfaqsCarousel() {
    faqsCarousel().then((data) => { // THE AJAX CALL IS ON ITS OWN SEPARATE FUNCTION ( faqsCarousel() )
        var article_data = '';
        $.each(data, function (key, value) {
            //...more code on top
            var articles = value.articles
            var desiredArticleStructure = ""

            //here sort and loop through all the articles 
            var sortedArticles = articles.sort(function (a, b) {
                return a.position - b.position
            })


            sortedArticles.map(article => {
                $('.title').innerText = article.title
                $('.title body').innerHtml = article.body
                //...your structure goes on

                desiredArticleStructure += `
                    <div class='title'>
                        <div class="body"></div>
                    </div>
                `
            })


            if (category != 'faqs-home') {
                article_data += `<div>
                    <div class="cc-box">
                        <div class="cc-hoverbox"> <span> <img alt="faqIcon" src="`+ value.category.icon + `" /> </span>
                            <h3>`+ catname + `</h3>
                            <ul class="feature-list">
                               <li>articles here</li>
                            </ul>
                        </div>
                        <a class="viewBtn" href="javascript:void(0)" data-category="`+ catid + `" data-slug="` + category + `">See All</a> </div>
                </div>`;
            }

            $('.feature-list').innerHtml = desiredArticleStructure
        });
    });
}

getfaqsCarousel();

推荐阅读