Question

我有两个数组，一个数组是里程碑年份，用于在网页上显示其内容，还用于遍历由里程碑组成的辅助数组，每个里程碑都有一个日期，里程碑年份用于选择里程碑例如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.log("milestone: " + link.milestoneDate + link.title)
    var $link = $('<a>');

    if (link.milestoneDate.indexOf(category) != -1) {
        console.log("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年之间的里程碑。目前，它仅显示与年份完全匹配里程碑年份数组值的里程碑。

Answer 1

在$.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年之后，上面的确切解决方案失败。如有需要，请进行适当调整。

（您不必严格转换为数字，因为所有日期都是四位数字，因此比较字符串仍然可以正确比较它们。对我来说，使用数字更合适，但是...）< / p>

Answer 2

要获得预期结果，请使用以下使用reduce的选项

跨越里程碑的年份，以开始的十年为起点减少
过滤与该十年相比的值

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.log(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
}, {}))

codepen-https://codepen.io/nagasai/pen/ewmayW?editors=1010

有没有一种方法可以指定用于过滤或排序数组的年份范围？

2 个答案: