javascript - 遍历需要显示垂直列 3 年的数据，只显示包含数据的月份

Question

如果过去 3 年的每个月都包含数据，那么这个工作示例 fiddle 就是我需要数据的样子

https://jsfiddle.net/bthorn/ncqn0jwy/

但是，我并不总是有给定月份的数据，因此如果它不包含任何数据，我将不会显示该月份

这是我试图遍历数据的 fiddle

https://jsfiddle.net/bthorn/2zkhk3dt/1/

我首先尝试循环这些年以获得不同的年份，

for (var y in data) {
   if (typeof(uniqueYears[data[y].year]) === "undefined") {
     distinctYears.push(data[y].year);

      year = data[y].year;
        if (year === "" || year === null) {
           year = "";
        }

     strResult += "<th style='text-align:left;'><h2>" + year + "</h2></th>";
     //console.log(year);


     uniqueYears[data[y].year] = 0;


   }
}

然后我遍历月份并注意年份的循环，但我意识到这根本不对，因为每一行都需要考虑年和月，

所以数据对象“数据”包含数据，但我不明白如何将我的数据(第二 fiddle )融入年/月 fiddle (第一 fiddle )

我什至尝试调用一个函数，该函数使用年月 fiddle 的每个输出循环遍历我的所有数据，但由于某种原因它似乎只显示 2015 年 8 月，我做了很多控制台。日志

更新

基本上第一 fiddle 是这样的

(但是，我的数据在 2015 年的文件夹中只有 4 个月的文件)因此那些会出现，但其他我会显示为空白“”)

更新 2:

因此，我的年月循环数据输出显然根本不正确，请参见图片

更新 3

Third fiddle 显示我创建了一个函数来调用和循环我的数据以检查数据是否匹配，遗憾的是它只返回 2015 年 8 月的匹配

https://jsfiddle.net/bthorn/rsu7mxbm/

Answer 1

您将需要遍历所有 12 个月，并且只添加指向数据中出现的链接，请参阅 jsfiddle

        var months = [
          { number: '01', title: 'January' },
          { number: '02', title: 'February' },
          { number: '03', title: 'March' },
          { number: '04', title: 'April' },
          { number: '05', title: 'May' },
          { number: '06', title: 'June' },
          { number: '07', title: 'July' },
          { number: '08', title: 'August' },
          { number: '09', title: 'September' },
          { number: '10', title: 'October' },
          { number: '11', title: 'November' },
          { number: '12', title: 'December' }
        ];

var data = [{
  "fileName": "August.20.2015.pdf",
  "fileSizeText": "609 KB",
  "fileAccessed": "2015-12-03T07:21:11.767626-07:00",
  "directoryName": "08 - 2015",
  "year": "2015",
  "month": "August",
  "shortMonth": "08"
}, {
  "fileName": "September.15.2015.pdf",
  "fileSizeText": "806 KB",
  "fileAccessed": "2015-10-21T13:18:21.577097-07:00",
  "directoryName": "09 - 2015",
  "year": "2015",
  "month": "September",
  "shortMonth": "09"
}, {
  "fileName": "October.22.2015.pdf",
  "fileSizeText": "331 KB",
  "fileAccessed": "2015-12-15T10:21:00.194822-07:00",
  "directoryName": "10 - 2015",
  "year": "2015",
  "month": "October",
  "shortMonth": "10"
}, {
  "fileName": "October.28.2015.pdf",
  "fileSizeText": "2009 KB",
  "fileAccessed": "2015-12-01T10:44:27.754937-07:00",
  "directoryName": "10 - 2015",
  "year": "2015",
  "month": "October",
  "shortMonth": "10"
}, {
  "fileName": "October.06.2015.pdf",
  "fileSizeText": "3161 KB",
  "fileAccessed": "2015-11-25T13:51:46.210558-07:00",
  "directoryName": "10 - 2015",
  "year": "2015",
  "month": "October",
  "shortMonth": "10"
}, {
  "fileName": "December.03.2015.pdf",
  "fileSizeText": "1778 KB",
  "fileAccessed": "2015-12-07T05:23:33.228568-07:00",
  "directoryName": "12 - 2015",
  "year": "2015",
  "month": "December",
  "shortMonth": "12"
}, {
  "fileName": "December.04.2015.pdf",
  "fileSizeText": "144 KB",
  "fileAccessed": "2015-12-08T05:06:34.223478-07:00",
  "directoryName": "12 - 2015",
  "year": "2015",
  "month": "December",
  "shortMonth": "12"
}, {
  "fileName": "December.07.2015.pdf",
  "fileSizeText": "201 KB",
  "fileAccessed": "2015-12-09T05:04:58.541633-07:00",
  "directoryName": "12 - 2015",
  "year": "2015",
  "month": "December",
  "shortMonth": "12"
}, {
  "fileName": "December.09.2015.pdf",
  "fileSizeText": "170 KB",
  "fileAccessed": "2015-12-10T05:03:51.05038-07:00",
  "directoryName": "12 - 2015",
  "year": "2015",
  "month": "December",
  "shortMonth": "12"
}, {
  "fileName": "December.21.2015.pdf",
  "fileSizeText": "1922 KB",
  "fileAccessed": "2015-12-22T05:23:42.132732-07:00",
  "directoryName": "12 - 2015",
  "year": "2015",
  "month": "December",
  "shortMonth": "12"
}, {
  "fileName": "December.22.2015.pdf",
  "fileSizeText": "202 KB",
  "fileAccessed": "2015-12-23T06:28:09.500499-07:00",
  "directoryName": "12 - 2015",
  "year": "2015",
  "month": "December",
  "shortMonth": "12"
}, {
  "fileName": "August.20.2015.pdf",
  "fileSizeText": "609 KB",
  "fileAccessed": "2015-12-03T07:21:11.78063-07:00",
  "directoryName": "01 - 2016",
  "year": "2016",
  "month": "January",
  "shortMonth": "01"
}];

var strResult = "";
var month = "";

var final = "";

strResult = "<table class='table-light' id='myTableId'><thead>";

var year = "";
var uniqueYears = {};
var distinctYears = [];

var unique = {};
var distinct = [];

var count = 0;

strResult += "<tr>";

for (var y in data) {
  if (typeof(uniqueYears[data[y].year]) === "undefined") {
    distinctYears.push(data[y].year);

    year = data[y].year;
    if (year === "" || year === null) {
      year = "";
    }

    strResult += "<th style='text-align:left;'><h2>" + year + "</h2></th>";
    //console.log(year);


    uniqueYears[data[y].year] = 0;


  }
}
strResult += "</tr></thead><tbody>";


////////////////////////////////////////
// loop over the years 
for (var z in distinctYears) {

  //strResult += "<th style='text-align:left;'><h2>" + distinctYears[z] + "</h2></th>";
  // loop over all the files 
  for (var i in data) {

    // create rows of the files  that match the year 
    if (distinctYears[z] == data[i].year) {



      if (typeof(unique[data[i].shortMonth]) === "undefined") {
        distinct.push({'month':data[i].shortMonth, 'year':data[i].year});
        //   do the work here
        month = data[i].month; console.log(month)
        if (month === "" || month === null) {
          month = "";
        }

      }
      unique[data[i].shortMonth] = 0;
    }

  }

}
console.log(distinct);

for (var i = 0; i < 12; i++)
{
strResult += "<tr>";
  for (var z in distinctYears)
  {

    if (findData(months[i], distinctYears[z]))
        {
           if (z == 0) {
          strResult += "<td><a target='blank' class='link ng-binding' href='files.html?id=sub&year=" + distinctYears[z] + "&month=" + months[i].number + "' onclick=\"getFiles('" + distinctYears[z] + "','" + months[i].number + "');\">" + months[i].title + "</a></td>";
        } else if (z == 1) {
          strResult += "<td><a target='blank' class='link ng-binding' href='files.html?id=sub&year=" + distinctYears[z] + "&month=" + months[i].number + "' onclick=\"getFiles('" + distinctYears[z] + "','" + months[i].number + "');\">" + months[i].title + "</a></td>";
        } else if (z == 2) {
          strResult += "<td><a target='blank' class='link ng-binding' href='files.html?id=sub&year=" + distinctYears[z] + "&month=" + months[i].number + "' onclick=\"getFiles('" + distinctYears[z] + "','" + months[i].number + "');\">" + months[i].title + "</a></td>";
        }     
      }
  else
  {
           if (z == 0) {
          strResult += "<td>"+months[i].title + "</td></td>";
        } else if (z == 1) {
          strResult += "<td>" + months[i].title + "</td>";
        } else if (z == 2) {
          strResult += "<td>" + months[i].title + "</td>";
        }  
  }


    }
      strResult += "</tr>";
}

function findData(m, y)
{
  for (var z in distinct)
    {
       if (distinct[z].month == m.number && distinct[z].year == y)
         return true;
    }
  return false;  
}

strResult += "</tbody></table>";
$("#divResult").html(strResult);