Question

我正在向浏览器呈现本地JSON，并且每个项目都包含ISO 8601时间中的修改日期（例如“ 2019-03-19T18：50：39Z”）。计划这样做，以便如果“创建日期”早于30天，那么它将在div中隐藏。

我应该将时间转换为更具可读性的格式（例如03/19/2019）吗？使用起来会更容易吗？

可以随时添加新的JSON数据，这就是为什么我需要使代码动态化的原因。这是我为此苦苦挣扎的部分原因。

JS代码段：

import testjson from './test.json';

export default class {
    constructor() { 
    }

    loadNewCourses() {
        let newCrs = testjson.d.results
            .sort(function(a, b) { // sorts by newest
                return (a.Created < b.Created) ? 1 : ((b.Created < a.Created) ? -1 : 0)
            })
            .filter((el, idx, self) => { // no duplicates
                return (idx === self.map(el => el.Category).indexOf(el.Category))
            })
            .map(x => {
                return {
                    "Category": x.Category,
                    "Title": x.Title,
                    "Description": x.Description,
                    "Created": x.Created
                }
            })



$.each(newCrs, function(idx, val) { // ---- does this look right?
        let current = new Date();
        let expiry = new Date(val.Created)

        if (current.getTime() > expiry.getTime()) {
            $('.categoryName').hide();
        } else if (current.getTime() < expiry.getTime()) {
            $('.categoryName').show();
        }
    })

        let curIndex = 0;
        $.each(newCrs, function(idx, val) {
            curIndex++; // this line must be here
            let targetDiv = $("div.new-training-div > div[col='" + curIndex + "']");

            let modalTrigger = $('<div />', {
                'class': 'categoryName',
                'data-category': val.Category,
                'data-target': '#modal-id',
                'data-toggle': 'modal',
                'text': val.Category
            });

            modalTrigger.prepend("<span class='triangle-right'>&blacktriangleright;</span>");

            targetDiv.append(modalTrigger);

            if(curIndex == 4) {
                curIndex = 0;
            }

        })

    } // ------------------ loadNewCourses

}

JSON代码段：

},
        "FileSystemObjectType": 0,
        "Id": 80,
        "Title": "Rome",
        "Category": "WorldCapitals",
        "Description": "A capital city (or simply capital) is the municipality exercising primary status in a country, state, province, or other administrative region, usually as its seat of government.",
        "TopTrainingCourse": false,
        "VideoLink": "https:\/\/www.google.com",
        "ID": 80,
        "Modified": "2019-03-19T18:50:39Z",
        "Created": "2019-03-19T18:50:39Z"

      }
...etc

Answer 1

我经常说«当涉及日期时...寻找moment.js！它可以轻松处理所有事情...»

我没有尝试完全重新创建您的代码...但是我拿了您的json示例制作了一个演示，其中在 Rome ， Paris 上有3门课程和英格兰。并且只有 England 创建于30天前的（截至今天3月20日！）。

请注意该行：expiry.add(30,"days")，其中将30天添加到json的“创建”日期。

再简单不过了...

var newCrs = [
  {
    "FileSystemObjectType": 0,
    "Id": 80,
    "Title": "Rome",
    "Category": "WorldCapitals",
    "Description": "A capital city (or simply capital) is the municipality exercising primary status in a country, state, province, or other administrative region, usually as its seat of government.",
    "TopTrainingCourse": false,
    "VideoLink": "https:\/\/www.google.com",
    "ID": 80,
    "Modified": "2019-03-19T18:50:39Z",
    "Created": "2019-03-19T18:50:39Z"  // Yesterday, march 19th
  },
  {
    "FileSystemObjectType": 0,
    "Id": 81,
    "Title": "Paris",
    "Category": "WorldCapitals",
    "Description": "A capital city (or simply capital) is the municipality exercising primary status in a country, state, province, or other administrative region, usually as its seat of government.",
    "TopTrainingCourse": false,
    "VideoLink": "https:\/\/www.google.com",
    "ID": 81,
    "Modified": "2019-03-19T18:50:39Z",
    "Created": "2019-03-01T18:00:00Z" // march 1st
  },
  {
    "FileSystemObjectType": 0,
    "Id": 82,
    "Title": "England",
    "Category": "WorldCapitals",
    "Description": "A capital city (or simply capital) is the municipality exercising primary status in a country, state, province, or other administrative region, usually as its seat of government.",
    "TopTrainingCourse": false,
    "VideoLink": "https:\/\/www.google.com",
    "ID": 82,
    "Modified": "2019-03-19T18:50:39Z",
    "Created": "2019-01-01T18:00:00Z" // february 1st
  }
];


$.each(newCrs, function(idx, val) {
  let current = moment();
  let expiry = moment(val.Created)

  if (current > expiry.add(30,"days")) {
    console.log( val.Title +" is hidden." );
  } else {
    console.log( val.Title +" is shown." );
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

如果日期值超过30天，则隐藏JSON元素

JS代码段：

JSON代码段：

1 个答案: