jQuery - 按时间顺序对任何给定的 JSON 进行排序 使用标准格式的日期，例如 ISO你就快到了您可以在编辑器中使用 图标发布代码

问题描述

我有这个 JSON 数组，我试图将它呈现到 chartistJs 中。但是，此 JSON 的结果未按时间顺序格式化。

[
    {"May2021": "181287.56"},{"Mar2021": "94824.95"},{"Feb2021": "79316.17"},{"Apr2021": "107782.89"},{"Jan2021": "94802.65"},{"Jun2021": "100671.2"}
]

我拥有的 jQuery 逻辑是捕获月份值并将其呈现为 X 和 Y 轴系列。

$(document).ready(function () {
  var months = {
    Jan: 0,Feb: 1,Mar: 2,Apr: 3,May: 4,Jun: 5,Jul: 6,Aug: 7,Sep: 8,Oct: 9,Nov: 10,Dec: 11
  };

  $.ajax({
    url:
      "https://flci9mttga.execute-api.ap-south-1.amazonaws.com/poc/costAggregateAPI",type: "GET",dataType: "json",async: true,crossDomain: true,success: function (response) {
      //console.log(response);
      var arrLabels = [],arrShortLabels = [],arrSeries = [],arrSortedSerise = [];

      $.map(response,function (item,index) {
        var dtM = item.substring(0,3);
        var dtY = item.substring(3,7);

        arrLabels.push(new Date(dtY,months[dtM]));
        arrShortLabels.push(new Date(dtY,months[dtM]).toDateString("MMYYYY"));
        arrSeries.push(item.Y);
      });

      arrShortLabels.sort(function (x,y) {
        let a = new Date(x),b = new Date(y);
        return a - b;
      });

      var data = {
        labels: arrShortLabels,series: arrSeries
      };
      demo.initDocChartist(data);
    }
  });
});

ChartistJS 插件代码如下 -

initDocChartist: function (data) {
    var dataSales = {
      labels: data.labels,series: [data.series]
    };

    var optionsSales = {
      linesmooth: false,low: 0,high: 120000,showArea: true,height: "245px",axisX: {
        showGrid: false
      },linesmooth: Chartist.Interpolation.simple({
        divisor: 3
      }),showLine: false,showPoint: false
    };

    var responsiveSales = [
      [
        "screen and (max-width: 640px)",{
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            }
          }
        }
      ]
    ];

    Chartist.Line("#chartHours",dataSales,optionsSales,responsiveSales);

如果有人能帮我解决这个问题，我将不胜感激

解决方法

使用标准格式的日期，例如 ISO

手动输入数据并且不懂编程的人有时只会将日期写为“Mar2020”，因为他们总是打算手动解释它。

但是，作为程序员，您应该尝试始终以易于自动解释的明确方式存储信息。

我建议你将月份+年份转换成以下数字格式：

 yyyy-mm

这很好，因为：

• 对于来自任何人类语言的程序员来说是明确的
• 它被普通民众理解
• 如果按字母顺序排序，它会自动按日期顺序显示
• 它是 ISO 1601 日期格式的第一部分，在计算中被广泛理解和使用。

你就快到了

不是使用 toDateString 进行转换，而是应用任意不可排序的方案，例如“mmyyyy”，而是使用

.toDateString("MMYYYY")

... 试试：

.toISOString().slice(0,7)

结果结构只是一个字符串，这意味着它是

• 易于明确存储

• 易于理解

• 无时区问题，有时会在 Date 类型中出现

您可以在编辑器中使用 图标发布代码

人们会发现测试您的代码更容易，因此会更鼓励为您修改它。