如何在 Javascript 中对嵌套 JSON 对象数组中的日期、数字、字符串进行排序

Question

Hi 动态获取 JOSN 数据，根据 JOSN 将数据呈现在表中。在 JSON 嵌套对象中，这些名称和属性键也是动态的。我需要根据表格列向上和向下按钮操作 ASC 和 DESC 进行排序。在按钮操作中，我得到要排序的属性名称，属性键名称将放置在嵌套对象内，或者它可能位于上层。如何动态识别和排序数字、字符串或日期。非常感谢。

以下逻辑，我只添加了单级 JSON 对象的工作，而不是嵌套级对象。

dynamicJSON.sort((a, b) => {
          if (a[sortKeyname] < b[sortKeyname]) {
            return sortConfig.direction === 'ascending' ? -1 : 1;
          }
          if (a[sortKeyname] > b[sortKeyname]) {
            return sortConfig.direction === 'ascending' ? 1 : -1;
          }
          return 0;
        });

以下是示例动态 JSON 数据

从下面的 JSON 中，我有 7 列，如果我选择状态列 ASC/DESC 按钮，我将获得用于排序的 statusname 属性。它应该根据关键属性 statusname 遍历和排序嵌套的 JSON 对象。如果我选择详细信息列 ASC/DESC 按钮，我将获得用于排序的 ma​​indescription 属性。它应该根据 ma​​indescription 的关键属性遍历和排序嵌套的 JSON 对象。

[
   {
      "Date":"2020-10-16T04:15:58+00:00",
      "applicationName":"abc Portal",
      "status":{
         "statusname":"Success",
         "style":"success"
      },
      "details":{
         "maindescription":"welcome to the application",
         "maindescriptionSecn":"description 2",
         "maindescriptionSecnthrid":"description 3"
      },
      "location":"Sondekoppa, Karnataka, IN",
      "ipAddress":"157.49.147.190",
      "count":123
   },
   {
      "Date":"2020-10-16T04:15:56+00:00",
      "applicationName":"poratl 1",
      "status":{
         "statusname":"Success",
         "style":"success"
      },
      "details":{
         "maindescription":"welcome to the application",
         "maindescriptionSecn":"description 2",
         "maindescriptionSecnthrid":"description 3"
      },
      "location":"Sondekoppa, Karnataka, IN",
      "ipAddress":"157.49.147.190",
      "count":789
   },
   {
      "Date":"2020-10-16T04:21:41+00:00",
      "applicationName":"app Hub",
      "status":{
         "statusname":"Failure",
         "style":"error"
      },
      "details":{
         "maindescription":"welcome to the application",
         "maindescriptionSecn":"description 2",
         "maindescriptionSecnthrid":"description 3"
      },
      "location":"Sondekoppa, Karnataka, IN",
      "ipAddress":"157.49.147.190",
      "count":666
   }
]

Answer 1

您可以对想要的键/键和方向使用闭包，并使用返回的函数进行排序。

排序功能使用按点分割移交的键字符串并从（嵌套）对象中获取值的函数。

const
    sortBy = (key, direction = 'ascending') => (a, b) => {
        const
            factor = +(direction === 'ascending') || -1,
            getValue = (object, keys) => keys.split('.').reduce((o, k) => o?.[k], object),
            valueA = getValue(a, key),
            valueB = getValue(b, key);

        return factor * (valueA > valueB || -(valueA < valueB));
    },
    data = [{ Date: "2020-10-16T04:15:58+00:00", applicationName: "IAM Portal/IAM Portal", status: { foo: 'b', statusname: "Success", style: "success" }, details: { maindescription: "welcome to the application", maindescriptionSecn: "description 2", maindescriptionSecnthrid: "description 3" }, location: "Sondekoppa, Karnataka, IN", ipAddress: "157.49.147.190", count: 123 }, { Date: "2020-10-16T04:15:56+00:00", applicationName: "IAM Portal/IAM Portal", status: { foo: 'a', statusname: "Success", style: "success" }, details: { maindescription: "welcome to the application", maindescriptionSecn: "description 2", maindescriptionSecnthrid: "description 3" }, location: "Sondekoppa, Karnataka, IN", ipAddress: "157.49.147.190", count: 789 }, { Date: "2020-10-16T04:21:41+00:00", applicationName: "IAM Portal/Reports Hub", status: { foo: 'c', statusname: "Failure", style: "error" }, details: { maindescription: "welcome to the application", maindescriptionSecn: "description 2", maindescriptionSecnthrid: "description 3" }, location: "Sondekoppa, Karnataka, IN", ipAddress: "157.49.147.190", count: 666 }];

data.sort(sortBy('status.foo'));
console.log(data);

data.sort(sortBy('status.foo', 'descending'));
console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }