javascript array sort by two specific names first [duplicate]

Question

I have table columns that I have sorted to have column key 'status' always on first order, then later i realized that i need to put checkbox before it, so now i have three conditions:

If only 'status' then it is first, if 'status' and 'checkbox' then status becomes second order, else if only 'checkbox' then first.

I have tried to add to my current working sort on 'status' but i haven't quite understood how exactly that sort compare works on two specific names:

 config.tableColumns.sort((a, b) => {
  if ((a.Key.toLowerCase() == 'checkbox' && a.Key.toLowerCase() != 'status') 
  || (a.Key.toLowerCase() != 'checkbox' && a.Key.toLowerCase() == 'status')) {
    return -1;
  }
  if (a.Key.toLowerCase() != 'checkbox' && a.Key.toLowerCase() != 'status') {
    return 1;
  }
  const nameA = a.Key || '';
  const nameB = b.Key || '';
  return nameA.localeCompare(nameB);
});

Sample array :

_tableColumns: [
                  new TableColumns({ _key: 'Id', _prop: 'id', _name: 'Id', _visible: false, _order: 0, _type: "number", _filterable: false }),
                  new TableColumns({ _key: 'IntegrationId', _prop: 'integrationId', _name: 'IntegrationId', _visible: false, _order: 1, _type: "number", _filterable: false }),
                  new TableColumns({ _key: 'Status', _prop: 'status', _name: 'Status', _visible: true, _order: 2, _type: "text", _filterable: false }),
                  new TableColumns({ _key: 'Service', _prop: 'service', _name: 'Service', _visible: false, _order: 3, _type: "text", _filterable: false }),
                  new TableColumns({ _key: 'ContentProvider', _prop: 'contentProvider', _name: 'ContentProvider', _visible: false, _order: 4, _type: "text", _filterable: false }),
                  new TableColumns({ _key: 'PaymentGateway', _prop: 'paymentGateway', _name: 'PaymentGateway', _visible: false, _order: 5, _type: "text", _filterable: false }),
                  new TableColumns({ _key: 'Country', _prop: 'country', _name: 'Country', _visible: true, _order: 6, _type: "text", _filterable: false }),
                  new TableColumns({ _key: 'Operator', _prop: 'operator', _name: 'Operator', _visible: true, _order: 7, _type: "text", _filterable: false }),
                  new TableColumns({ _key: 'BillingType', _prop: 'billingType', _name: 'Billing Type', _visible: true, _order: 8, _type: "text", _filterable: false }),
                  new TableColumns({ _key: 'ContentCategory', _prop: 'contentCategory', _name: 'Content Category', _visible: false, _order: 9, _type: "text", _filterable: false }),
                  new TableColumns({ _key: 'ContentType', _prop: 'contentType', _name: 'Content Type', _visible: false, _order: 10, _type: "text", _filterable: false }),
                  new TableColumns({ _key: 'PricePointType', _prop: 'pricePointType', _name: 'Price Point Type', _visible: false, _order: 11, _type: "text", _filterable: false }),
                  new TableColumns({ _key: 'ServiceRate', _prop: 'serviceRate', _name: 'Service Rate', _visible: true, _order: 12, _type: "number", _filterable: false }),
                  new TableColumns({ _key: 'checkbox', _prop: 'checkbox', _name: '', _visible: true, _order: 13, _type: "checkbox", _filterable: false, _sortable: false }),
                ]

Expected is to change _order of key 'checkbox' to 0 and 'status' to 1 in that case

Any help would be appreciated. Thanks.

At least related: stackoverflow.com/questions/62156951/… and stackoverflow.com/questions/74874436/… and stackoverflow.com/questions/32261581/… — T.J. Crowder
– T.J. Crowder, Commented Dec 18, 2023 at 10:22

Nina Scholz · Accepted Answer · 2023-12-18 10:13:34Z

1

You could take an object with order of the wanted keys.

const
    data = [{ _key: 'Id', _prop: 'id', _name: 'Id', _visible: false, _order: 0, _type: "number", _filterable: false }, { _key: 'IntegrationId', _prop: 'integrationId', _name: 'IntegrationId', _visible: false, _order: 1, _type: "number", _filterable: false }, { _key: 'Status', _prop: 'status', _name: 'Status', _visible: true, _order: 2, _type: "text", _filterable: false }, { _key: 'Service', _prop: 'service', _name: 'Service', _visible: false, _order: 3, _type: "text", _filterable: false }, { _key: 'ContentProvider', _prop: 'contentProvider', _name: 'ContentProvider', _visible: false, _order: 4, _type: "text", _filterable: false }, { _key: 'PaymentGateway', _prop: 'paymentGateway', _name: 'PaymentGateway', _visible: false, _order: 5, _type: "text", _filterable: false }, { _key: 'Country', _prop: 'country', _name: 'Country', _visible: true, _order: 6, _type: "text", _filterable: false }, { _key: 'Operator', _prop: 'operator', _name: 'Operator', _visible: true, _order: 7, _type: "text", _filterable: false }, { _key: 'BillingType', _prop: 'billingType', _name: 'Billing Type', _visible: true, _order: 8, _type: "text", _filterable: false }, { _key: 'ContentCategory', _prop: 'contentCategory', _name: 'Content Category', _visible: false, _order: 9, _type: "text", _filterable: false }, { _key: 'ContentType', _prop: 'contentType', _name: 'Content Type', _visible: false, _order: 10, _type: "text", _filterable: false }, { _key: 'PricePointType', _prop: 'pricePointType', _name: 'Price Point Type', _visible: false, _order: 11, _type: "text", _filterable: false }, { _key: 'ServiceRate', _prop: 'serviceRate', _name: 'Service Rate', _visible: true, _order: 12, _type: "number", _filterable: false }, { _key: 'checkbox', _prop: 'checkbox', _name: '', _visible: true, _order: 13, _type: "checkbox", _filterable: false, _sortable: false }],
    order = { checkbox: 1, Status: 2, default: 3 };

data.sort((a, b) =>
    (order[a._key] || order.default) - (order[b._key] || order.default) ||
    (a._key || '').localeCompare(b._key || '')
);

console.log(data);

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

answered Dec 18, 2023 at 10:13

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

T.J. Crowder Over a year ago

Heh, you've shown this approach before. :-)

Nina Scholz Over a year ago

@T.J.Crowder, yes in various answers. ;-)

Wimanicesir Over a year ago

Well I think the "one-liner" doesn't need much explanation. However, it is a bit weird to provide the same answer over and over again instead of marking as duplicate..

Collectives™ on Stack Overflow

javascript array sort by two specific names first [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related