我正在使用fetch()创建一个从匹配的section列表中提取和排序列表。greenhouse apicontainer
我有一个预定义的列表departments，我已将其存储在departments数组中。如果某个fetched项目的值与该data-dept值相似，则将在该值html下添加该值container。
这是一个示例，数组中的一项是“Sales”。一旦fetch()完成，可能会发生两件事：
- 存在“销售”的工作
department，在这种情况下，它将附加到data-dept="sales". 注意：在我的代码中，我data-dept^=用来查找相似的名称。如果“销售我们”在 api 中退出，那么我也希望将其附加到[data-dept="sales"]. department“销售”不存在任何工作。在这种情况下，如果“[data-dept="sales"]` 没有子元素，请将其隐藏，因为显示没有列表的部门是没有意义的。
目前的问题：
- 您可以通过访问API URL看到具有“销售”“部门”的工作确实存在，但它们没有附加到我的
data-dept="sales"div（它没有子元素）。 array任何与需要追加的部门不相似的职位data-dept="other"，但此部分也是空的。例如，您的 api 为“建筑师”的“部门”提供工作。此选项不在数组中，因此需要将这些作业附加到data-dept="other".
代码：
$(function() {
fetch('https://boards-api.greenhouse.io/v1/boards/example/jobs?content=true', {})
.then(function (response) {
return response.json();
})
.then(function (data) {
appendDataToHTML(data);
})
.catch(function (err) {
console.log(err);
});
function appendDataToHTML(data) {
const mainContainer = document.getElementById("careers-listing");
// for each object, create card
for (var i = 0; i < Object.keys(data.jobs).length; i++) {
var department = data.jobs[i].departments[0].name;
department = department.replace(/\s+/g, '-').toLowerCase();
var job_title = data.jobs[i].title;
var job_location = data.jobs[i].location.name;
var html =
'<figure class="careercard" data-dept="'+ department +'">' +
'<div class="careercard__inner">' +
'<figcapton class="careercard__role">' +
'<span class="careercard__title">' + job_title + '</span>' +
'</figcapton>' +
'<div class="careercard__address">' +
'<span class="careercard__location">' + job_location + '</span>' +
'</div>' +
'</div>' +
'</figure>';
// filter card in correct parent category
if ("[data-dept^="+ department +"]") {
$(".careersIntegration__accordion-jobs[data-dept^='" + department + "']").append(html);
} else{
$(".careersIntegration__accordion-jobs[data-dept='other']").append(html);
}
}
}
/* fetch end */
$('.careersIntegration__accordion-jobs').each(function(index, obj){
console.log(this);
if ( $(this).length == 0 ) {
console.log("hide");
} else{
console.log("dont hide");
}
});
});{% set departments = ["Sales" "Technology", "Creative", "Other"] %}
<section class="careersIntegration">
<div class="careersIntegration__listing" id="careers-listing">
{% for dept in departments %}
<div class="careersIntegration__accordion">
<div class="careersIntegration__accordion-header">
<span class="careersIntegration__accordion-dept">{{ dept }}</span>
</div>
<div class="careersIntegration__accordion-jobs" data-dept="{{ dept|lower|replace( ' ', '-' ) }}"></div>
</div>
{% endfor %}
</div>
</section>如果有帮助，这是我尝试实现的布局的视觉指南：
