React JS按UTC格式的日期排序json

Question

我使用react JS从API端点获取一些数据，然后显示它。我想在显示它之前按日期和时间排序。数据被获取时是这样的:

{
"2021-03-09T07:47:24.897Z[UTC]": "Something happened",
"2021-03-09T07:48:12.256Z[UTC]": "Test event",
"2021-03-09T08:04:49.484Z[UTC]": "Warning",
"2021-03-09T07:08:15.714Z[UTC]": "Test event 2",
"2021-03-09T07:47:24.736Z[UTC]": "Something bad happened 2"
}

我不能改变这个json结构。我需要按日期和时间排序，并以这种格式显示YYYY-MM-DD h:mm:ss

我的函数是这样的:

formatDate(obj) {
return Object.keys(obj).sort((a,b) => moment(a.obj).format('YYYY-MM-DD h:mm:ss') - moment(b.obj).format('YYYY-MM-DD h:mm:ss'))
}

然后对获取的json对象执行以下操作:

console.log(this.formatDate(json));

这样做将返回以下内容:

0: "2021-03-09T07:47:24.897Z[UTC]"
1: "2021-03-09T07:48:12.256Z[UTC]"
2: "2021-03-09T08:04:49.484Z[UTC]"
3: "2021-03-09T07:08:15.714Z[UTC]"
4: "2021-03-09T07:47:24.736Z[UTC]"

返回的日期没有排序。我如何确保这些返回是有序的?

Answer 1

1. json中没有obj属性
2. 不需要应用format，该值变为String。我们可以比较一下力矩对象。
3. "(UTC)";里面的键不是标准的日期格式，这会导致警告

弃用警告:提供的值不是可识别的RFC2822或ISO格式。moment构造返回到js Date()，它在所有浏览器和版本中都不可靠。不鼓励使用非RFC2822/ISO日期格式。更多信息请访问http://momentjs.com/guides/#/warnings/js-date/。

你可以试试下面的代码片段来修复上面的问题:

$(function () {

let json = {
"2021-03-09T07:47:24.897Z[UTC]": "Something happened",
"2021-03-09T07:48:12.256Z[UTC]": "Test event",
"2021-03-09T08:04:49.484Z[UTC]": "Warning",
"2021-03-09T07:08:15.714Z[UTC]": "Test event 2",
"2021-03-09T07:47:24.736Z[UTC]": "Something bad happened 2"
};
console.log("Sorted result:");
console.log(formatDate(json));
});
// better to name it as sortDate
function formatDate(obj) {
return Object.keys(obj).sort((a,b) => moment(a.replace("[UTC]","")) - moment(b.replace("[UTC]","")));
}

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

Answer 2

如果你想格式化一个日期，或者像你的问题一样对它进行排序，你的函数不清楚，但是你可以直接比较日期时间字符串进行排序，即dateA.localeCompare(dateB)。

Object.fromEntries(
Object.entries(data).sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
);

将对象转换为键值对数组，并按键值对数组排序，然后将键值对数组转换回对象。

如果你需要进行任何格式转换，那么你应该通过map操作来完成，即你将键数组从一种格式映射到另一种格式。

转换为UTC时间:

moment.utc(key.replace("[UTC]", "")).format('YYYY-MM-DD h:mm:ss')

const data = {
"2021-03-09T07:47:24.897Z[UTC]": "Something happened",
"2021-03-09T07:48:12.256Z[UTC]": "Test event",
"2021-03-09T08:04:49.484Z[UTC]": "Warning",
"2021-03-09T07:08:15.714Z[UTC]": "Test event 2",
"2021-03-09T07:47:24.736Z[UTC]": "Something bad happened 2"
};
const sortedData = Object.fromEntries(
Object.entries(data).sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
);
console.log(sortedData);
const mappedData = Object.fromEntries(
Object.entries(sortedData).map(([key, value]) => [
moment.parseZone(key.replace("[UTC]", "")).format('YYYY-MM-DD h:mm:ss'),
value
])
);
console.log(mappedData);

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