Есть ли способ указать диапазон лет для фильтрации или сортировки массива?

У меня есть два массива, один массив - это вехи, которые используются для отображения его содержимого на веб-странице, а также используются для перебора вторичного массива, состоящего из вех, каждая веха имеет дату, а вехи используются для выбора вех из диапазонов лет. скажем 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
46
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В начале обратного вызова $.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 года. При необходимости отрегулируйте.


(Вам не обязательно преобразовывать в числа, потому что все ваши даты состоят из четырех цифр, и поэтому сравнение строк все равно будет сравнивать их правильно. Мне кажется более правильным использовать числа, но...)

Для достижения ожидаемого результата используйте приведенный ниже вариант использования сокращения

  1. Цикл через этапные годы с уменьшением с десятичным годом начала
  2. Отфильтровать значения по сравнению с этим десятилетием

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

Другие вопросы по теме