У меня есть два массива, один массив - это вехи, которые используются для отображения его содержимого на веб-странице, а также используются для перебора вторичного массива, состоящего из вех, каждая веха имеет дату, а вехи используются для выбора вех из диапазонов лет. скажем 1980-1990 гг.
В настоящее время я не могу отображать вехи в диапазоне от вехи, только те, чьи годы соответствуют значению вехи.
Я попытался изменить свое условное выражение, чтобы отображались только вехи из определенного диапазона.
<div id = "output"></div>
var milestoneyears = ['1980', '1990','1999','2000', '2001']
var jsonData = {
"milestones" : [
{
"milestoneDate": "1980",
"title": "First title for 1980 event"
},
{
"milestoneDate": "1980",
"title": "Second title for 1980 event"
},
{
"milestoneDate": "1982",
"title": "First title for 1982 event"
},
{
"milestoneDate": "1990",
"title": "First title for 1990 event"
},
{
"milestoneDate": "1999",
"title": "First title for 1999 event"
},
{
"milestoneDate": "1999",
"title": "Second title for 1999 event"
},
{
"milestoneDate": "1999",
"title": "Third title for 1999 event"
},
{
"milestoneDate": "2000",
"title": "First title for 2000 event"
},
{
"milestoneDate": "2001",
"title": "First title for 2000 event"
}
]
}
var menu = $("#output");
// FIND DIFFERENCE IN ARRAYS
function arrDiff(arr1, arr2) {
var arrays = [arr1, arr2].sort((a, b) => a.length - b.length);
var smallSet = new Set(arrays[0]);
return arrays[1].filter(x => !smallSet.has(x));
}
var foundArr = [];
for(var i = 0; i < milestoneyears.length; i++) {
var catz = milestoneyears[i];
for(var x = 0; x < jsonData.milestones.length; x++) {
if (catz == jsonData.milestones[x].milestoneDate) {
foundArr.push(catz)
}
}
}
var filteredArr = foundArr.filter(function(item, index) {
if (foundArr.indexOf(item) == index)
return item;
});
var noMilestones = arrDiff(filteredArr, milestoneyears);
$.each(milestoneyears, function(catIndex, category) {
// DOM ELEMENTS
var $item = $('<div>').addClass('navContainer');
var $title = $('<div>').addClass('title').appendTo($item);
var $links = $('<ul>').appendTo(
$('<div>').addClass('links').appendTo($item)
);
// MILESTONE YEAR
$title.text(category);
$.each(jsonData.milestones, function(linkIndex, link) {
console.info("milestone: " + link.milestoneDate + link.title)
var $link = $('<a>');
if (link.milestoneDate.indexOf(category) != -1) {
console.info("years: " + link.milestoneDate)
$link.attr('href', link.Link)
.text(link.milestoneDate + "--" + link.title)
.appendTo($('<li>').appendTo($links));
}
if (noMilestones.indexOf(category) != -1) {
$link.attr('href', "#")
.text("No milestones currently for this category")
.appendTo($('<li>').appendTo($links));
return false;
}
})
// DISPLAY TO CONTAINER
$item.appendTo(menu);
})
Ожидается, что вехи 1980, 1980 и 1980 будут показаны под вехой года для 1980 года. В настоящее время отображаются только вехи, чей год точно соответствует значениям массива вех.
1980
* 1980
* 1980
* 1982
1990
* 1990
* 1999
* 1999
* 1999
2000
* 2001



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


В начале обратного вызова $.each я бы преобразовал category в число, а также взял бы его после него, если он есть:
category = +category;
nextCategory = +(milestoneyears[cateIndex + 1] || "9999");
тогда вместо
if (link.milestoneDate.indexOf(category) != -1) {
Я бы преобразовал link.milestoneDate в число и проверил диапазон:
var thisDate = +link.milestoneDate;
if (thisDate >= category && thisDate < nextCategory) {
Это проверяет, находится ли он в диапазоне category <= thisDate < nextCategory.
Предупреждение. Приведенное выше точное решение не работает после 9999 года. При необходимости отрегулируйте.
(Вам не обязательно преобразовывать в числа, потому что все ваши даты состоят из четырех цифр, и поэтому сравнение строк все равно будет сравнивать их правильно. Мне кажется более правильным использовать числа, но...)
Для достижения ожидаемого результата используйте приведенный ниже вариант использования сокращения
var milestoneyears = ['1980', '1990','1999','2000', '2001']
var jsonData = {
"milestones" : [
{
"milestoneDate": "1980",
"title": "First title for 1980 event"
},
{
"milestoneDate": "1980",
"title": "Second title for 1980 event"
},
{
"milestoneDate": "1982",
"title": "First title for 1982 event"
},
{
"milestoneDate": "1990",
"title": "First title for 1990 event"
},
{
"milestoneDate": "1999",
"title": "First title for 1999 event"
},
{
"milestoneDate": "1999",
"title": "Second title for 1999 event"
},
{
"milestoneDate": "1999",
"title": "Third title for 1999 event"
},
{
"milestoneDate": "2000",
"title": "First title for 2000 event"
},
{
"milestoneDate": "2001",
"title": "First title for 2000 event"
}
]
}
console.info(milestoneyears.reduce((acc, v) => {
acc[(Math.floor(v/10)*10)] = jsonData.milestones.filter(val => {
return val.milestoneDate >= (Math.floor(v/10)*10) && val.milestoneDate < (Math.floor(v/10) *10)+10
});
return acc
}, {}))кодовое слово - https://codepen.io/nagasai/pen/ewmayW?editors=1010