基于另一个数组中的排序号的数组排序

Question

我想根据widgetOrder数组中的 sort_number 对小部件数组进行排序和重新排列。 我尝试循环小部件数组以比较 widgetOrder 中的 sort_number。 此小部件数组表示管理面板仪表板页面上的项目。它具有称为小部件的磁贴，可以更改其 position 或显示顺序。 当一个瓦片的position改变时，它被推送到widgetOrder。！

const widgets =
                    [
                        {
                            id: 59,
                            roleId: 3,
                            widgetId: 1,
                            sort_number: 1,
                            created_by: '1',
                            updated_by: '1',
                            createdAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            updatedAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            'dashboardWidget.id': 1,
                            'dashboardWidget.name': 'bookingCount',
                            'dashboardWidget.displayName': 'Booking Count',
                            'dashboardWidget.description': 'Shows the count of total bookings for the time period if specified, otherwise shows all booking count',
                            'dashboardWidget.isCounter': 1
                        },
                        {
                            id: 60,
                            roleId: 3,
                            widgetId: 2,
                            sort_number: 2,
                            created_by: '1',
                            updated_by: '1',
                            createdAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            updatedAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            'dashboardWidget.id': 2,
                            'dashboardWidget.name': 'pickUpCount',
                            'dashboardWidget.displayName': 'Pick-up Count',
                            'dashboardWidget.description': 'Shows the count of total pick-ups for the time period if specified, otherwise shows all pick-up count',
                            'dashboardWidget.isCounter': 1
                        },
                        {
                            id: 61,
                            roleId: 3,
                            widgetId: 3,
                            sort_number: 3,
                            created_by: '1',
                            updated_by: '1',
                            createdAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            updatedAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            'dashboardWidget.id': 3,
                            'dashboardWidget.name': 'dropOutCount',
                            'dashboardWidget.displayName': 'Drop-out Count',
                            'dashboardWidget.description': 'Shows the count of total drop-outs for the time period if specified, otherwise shows all drop-out count',
                            'dashboardWidget.isCounter': 1
                        },
                        {
                            id: 62,
                            roleId: 3,
                            widgetId: 9,
                            sort_number: 4,
                            created_by: '1',
                            updated_by: '1',
                            createdAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            updatedAt: '2021 - 04 - 22T03: 09: 32.098Z',
                            'dashboardWidget.id': 9,
                            'dashboardWidget.name': 'enquiryCount',
                            'dashboardWidget.displayName': 'Enquiry Count',
                            'dashboardWidget.description': 'Shows the count of total enquires for the time period if specified, otherwise shows all enquiry count',
                            'dashboardWidget.isCounter': 1
                        }
                    ];              

const widgetOrder =  [
                            { widgetId: 2, sort_number: 4, is_visible: 1 },
                            { widgetId: 3, sort_number: 1, is_visible: 1 }
                          ];

Answer 1

如果您不介意重新定义小部件数组，这可能会派上用场：

const orderedWidgets = [];
widgetOrder.sort((a,b) => a.sortNumber - b.sortNumber);
for (const orderItem of widgetOrder) {
  const foundWidget = widgets.find((widget) => widget.id === orderItem.id);
  if (foundWidget) {
    orderedWidgets.push(foundWidget);
  }
}
// You'll need to make widgets a variable for this to work:
widgets = orderedWidgets

这是我想到的最简单的解决方案，因为 Array.sort() 需要来自同一数组的可比较元素才能工作。 如果您需要保持您的小部件数组持久化，请回复，我会尽力提供帮助。

Answer 2

如果有任何不在widgetOrder中的元素，那么它们将推送到数组的最后一个。

 const widgets = [ { id: 59, roleId: 3, widgetId: 1, sort_number: 1, created_by: "1", updated_by: "1", createdAt: "2021 - 04 - 22T03: 09: 32.098Z", updatedAt: "2021 - 04 - 22T03: 09: 32.098Z", "dashboardWidget.id": 1, "dashboardWidget.name": "bookingCount", "dashboardWidget.displayName": "Booking Count", "dashboardWidget.description": "Shows the count of total bookings for the time period if specified, otherwise shows all booking count", "dashboardWidget.isCounter": 1, }, { id: 60, roleId: 3, widgetId: 2, sort_number: 2, created_by: "1", updated_by: "1", createdAt: "2021 - 04 - 22T03: 09: 32.098Z", updatedAt: "2021 - 04 - 22T03: 09: 32.098Z", "dashboardWidget.id": 2, "dashboardWidget.name": "pickUpCount", "dashboardWidget.displayName": "Pick-up Count", "dashboardWidget.description": "Shows the count of total pick-ups for the time period if specified, otherwise shows all pick-up count", "dashboardWidget.isCounter": 1, }, { id: 61, roleId: 3, widgetId: 3, sort_number: 3, created_by: "1", updated_by: "1", createdAt: "2021 - 04 - 22T03: 09: 32.098Z", updatedAt: "2021 - 04 - 22T03: 09: 32.098Z", "dashboardWidget.id": 3, "dashboardWidget.name": "dropOutCount", "dashboardWidget.displayName": "Drop-out Count", "dashboardWidget.description": "Shows the count of total drop-outs for the time period if specified, otherwise shows all drop-out count", "dashboardWidget.isCounter": 1, }, { id: 62, roleId: 3, widgetId: 9, sort_number: 4, created_by: "1", updated_by: "1", createdAt: "2021 - 04 - 22T03: 09: 32.098Z", updatedAt: "2021 - 04 - 22T03: 09: 32.098Z", "dashboardWidget.id": 9, "dashboardWidget.name": "enquiryCount", "dashboardWidget.displayName": "Enquiry Count", "dashboardWidget.description": "Shows the count of total enquires for the time period if specified, otherwise shows all enquiry count", "dashboardWidget.isCounter": 1, }, ]; const widgetOrder = [ { widgetId: 2, sort_number: 4, is_visible: 1 }, { widgetId: 3, sort_number: 1, is_visible: 1 }, ]; let result = []; const temp = []; widgets.forEach((widget) => { const order = widgetOrder.find((o) => o.widgetId === widget.widgetId)?.sort_number; if (order) result[order] = widget; else temp.push(widget); }); result = [...result.filter((w) => w), ...temp]; console.log(result);

Answer 3

我创建了一个 function 来帮助我从 widgetOrder 获取排序号

const getSortNumber = (widgetOrder, id) => {
    var orderEle = widgetOrder.filter((ele) => ele['widgetId']===id)[0]
  
  //if no sorting order return 0
  return orderEle? orderEle['sort_number'] : 0
}

然后我使用 the.sort() 和 function 根据它们的 ID 对小部件进行排序
对于升序/降序，只需在 getSortNumber 参数中交换 a 和 b

widgets = widgets.sort((a,b) => getSortNumber(widgetOrder, b['widgetId']) - getSortNumber(widgetOrder, a['widgetId']))