Question

我不确定是否有解决此问题的简便方法，但是我想基于对象y值和父x键对具有嵌套对象数组的对象数组进行排序。困难的部分是两个数组都组合在一起以表示某些数据。

这是数据结构

series: [
  {
    name: 'testData',
    data: [
      {x: abc, y: 488},
      {x: def, y: 65},
      {x: ghi, y: 380},
      {x: jkl, y: 190}
    ]
  },
  {
    name: 'testData2',
    data: [
      {x: abc, y: 241},
      {x: def, y: 232},
      {x: ghi, y: 72},
      {x: jkl, y: 724}
    ]
  }
]

在这个阶段，只有两个父对象，因此我需要比较每个对象并对其重新排序，最终结果将类似于

[
  {
    name: 'testData',
    data: [
      {x: jkl, y: 190}, // total for key jkl y combined values is 914
      {x: abc, y: 488}, // total for key abc y combined values is 729
      {x: ghi, y: 380}, // total for key ghi y combined values is 452
      {x: def, y: 65}, // total for key def y combined values is 297
    ]
  },
  {
    name: 'testData2',
    data: [
      {x: jkl, y: 724}, // total for key jkl y combined values is 914
      {x: abc, y: 241}, // total for key abc y combined values is 729
      {x: ghi, y: 72}, // total for key ghi y combined values is 452
      {x: def, y: 232} // total for key def y combined values is 297
    ]
  }
]

我已经尝试了一些想法，但是如果您在其他地方看到了不错的解决方案，似乎无法找到解决问题的方法，请随时链接它。

这是我尝试过的东西

series.forEach(obj => {
  obj.data.sort((a, b) => {
    return b.y - a.y;
  });
});

但是它最终只是将每个数组中的最大值移到顶部，而不是应该与另一个数组匹配的值。很难给出上下文，但是我正在使用Apexcharts，它使用数据来制作这样的图形：

    | testData | testData2
---------------------------
abc  ------ GraphBar ------ 
def  ------ AnotherBar ----
ghi  ------ thirdBar ------
jkl  ------ fourthBar -----
---------------------------

所以我需要弄清楚如何基于两个对象数据数组y值基于条形的累积值进行排序。

这是预排序的样子

然后，如您所见，它正在修改数据

Answer 1

假设我们将变量series命名为

const series = [
    {
        name: 'testData',
        data: [
            { x: 'abc', y: 488 },
            { x: 'def', y: 65 },
            { x: 'ghi', y: 380 },
            { x: 'jkl', y: 190 }
        ]
    },
    {
        name: 'testData2',
        data: [
            { x: 'abc', y: 241 },
            { x: 'def', y: 232 },
            { x: 'ghi', y: 72 },
            { x: 'jkl', y: 724 }
        ]
    }
]

（请注意，我已经使x属性具有string值，而不是像abc这样的裸标识符；我想这就是您想要的）

我们可以像这样解决您的排序任务。首先，让我们获得一个对象，其键为x值，其值为y值的总和：

const sums = series.reduce(
    (s, r) => (r.data.forEach(xy => s[xy.x] = (s[xy.x] || 0) + xy.y), s),
    {} as Record<string, number>
);

console.log(sums); // { abc: 729, def: 297, ghi: 452, jkl: 914 }

请注意，我在reduce内使用comma operator，其中第一部分进行了突变，而最后一部分将要突变的对象交出。除了简洁之外，它不一定比使用for循环好。

现在，我们可以使用data对series中的sums进行排序：

series.forEach(v => v.data.sort((a, b) => sums[b.x] - sums[a.x]));

console.log(JSON.stringify(series,null,2));
/*
[
  {
    "name": "testData",
    "data": [
      {
        "x": "jkl",
        "y": 190
      },
      {
        "x": "abc",
        "y": 488
      },
      {
        "x": "ghi",
        "y": 380
      },
      {
        "x": "def",
        "y": 65
      }
    ]
  },
  {
    "name": "testData2",
    "data": [
      {
        "x": "jkl",
        "y": 724
      },
      {
        "x": "abc",
        "y": 241
      },
      {
        "x": "ghi",
        "y": 72
      },
      {
        "x": "def",
        "y": 232
      }
    ]
  }
]
*/

对我来说合理。好吧，希望能有所帮助；祝你好运！

Link to code

Javascript尝试根据内部对象数组值对对象数组进行排序

1 个答案: