How can I loop inside a loop and sort results from a JSON object via AJAX call?

user_3354949 0
Viewed 71

I'm currently working on creating a dynamic carousel that is built by using data from a JSON object with the following basic structure:

[{
    "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": [
                ""
            ]
        }
    ]
}]

The above structure repeats depending on how many categories there are, so you have CATEGORIES with the ARTICLES that belong to that category right below it (also identified by the category ID inside the articles data), so for example, if you have 2 categories the JSON structure would be:

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

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

I have already managed to create the dynamic slides for the carousel, creating one slide per each category available within the JSON, but now I have to populate each category slide with all the articles belonging to that particular category. The code I'm using to create the slides is the following:

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();

Now, inside that $.each loop, I need to loop through all the articles for each category to replace the part of the code <li>articles here</li>

So my question is: How can I loop through all the articles inside the already existing categories loop and at the same time, SORT the results by the position property available inside each article?

Thanks for your time beforehand.

api jquery json ajax javascript
1 Answers
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();
user_125368610
Related