如何在循环内循环并通过 AJAX 调用对 JSON 对象的结果进行排序？
Posted
技术标签:
【中文标题】如何在循环内循环并通过 AJAX 调用对 JSON 对象的结果进行排序？【英文标题】：How can I loop inside a loop and sort results from a JSON object via AJAX call? 【发布时间】：2021-05-05 11:21:08 【问题描述】：我目前正在创建一个动态轮播，该轮播是使用来自具有以下基本结构的 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 标识），例如，如果您有JSON 结构将是 2 个类别：
[
"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 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 属性对结果进行排序？
提前感谢您的宝贵时间。
【问题讨论】：
【参考方案1】：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 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();
【讨论】：
感谢您的回复，我想我明白您试图解释的想法，但我对如何将您的解决方案与我现有的工作集成有点困惑。排序后的文章如何集成到我的幻灯片字符串中？desiredHtml 下的 HTML 代码是文章的 HTML 还是包含幻灯片循环的 HTML 代码？谢谢
@user3354949 你可以试试我更新的答案
我一直在调整您的最新答案，以进一步使其适用于我当前的代码，我不得不说这非常接近于完全正常工作。我遇到的问题是desiredArticleStructure 没有包含在每张幻灯片中。我一直在尝试将函数 $('.feature-list').innerHtml = desiredArticleStructure 放置在几个位置，并且尝试将函数更改为 $('.feature-list').html('<li data-article-id="someid">'+ articleTitle +'</li>') 我已成功提醒文章正确，但它们不会添加到最终渲染中
我在这里包含了我的最新代码作为示例：jsfiddle.net/lep1981/53qyuspa以上是关于如何在循环内循环并通过 AJAX 调用对 JSON 对象的结果进行排序？的主要内容，如果未能解决你的问题，请参考以下文章