How to sort Object array based on property

Question

I have a requirement to sort a object array based on frozenEdge property. If property value is start we should move item to top and property value is end we have to move item to bottom. Item which doesn't have field property are invalid so there position should remain as it ,In below array for example first item is invalid so we should not reorder.

I have tried a sample program which work in firefox but failing in chrome I am looking for a solution which can work in chrome, safari and firefox

Actual Array

[{
  "style": "width: 10px; text-align: center",
  "className": "oj-sm-only-hide table",
  "headerClassName": "Sample"
}, {
  "headerText": "Fee Description",
  "field": "Description"
}, {
  "headerText": "Amount",
  "field": "FeeAmount",
  "frozenEdge": "start"
}, {
  "headerText": "Currency",
  "field": "CurrencyCode",
  "frozenEdge": "start"
}, {
  "headerText": "Status",
  "field": "FeeStatus",
}, {
  "headerText": "Department",
  "field": "DepartmentDescription"
}, {
  "headerText": "Assessed Date",
  "field": "AssessedDate",
  "frozenEdge": "end"
}, {
  "headerText": "Payment Date",
  "field": "PaymentDate"
}, {
  "headerText": "Paid By",
  "field": "PaidBy",
  "frozenEdge": "end"
}, {
  "headerText": "Invoice",
  "field": "Invoice"
}, {
  "headerClassName": "table-header table-row-botton",
  "className": "table-row-botton"
}]

Expected Output

[{
  "style": "width: 10px; text-align: center",
  "className": "oj-sm-only-hide table",
  "headerClassName": "Sample"
}, {
  "headerText": "Amount",
  "field": "FeeAmount",
  "frozenEdge": "start"
}, {
  "headerText": "Currency",
  "field": "CurrencyCode",
  "frozenEdge": "start"
}, {
  "headerText": "Fee Description",
  "field": "Description"
}, {
  "headerText": "Status",
  "field": "FeeStatus",
}, {
  "headerText": "Department",
  "field": "DepartmentDescription"
}, {
  "headerText": "Payment Date",
  "field": "PaymentDate"
}, {
  "headerText": "Invoice",
  "field": "Invoice"
}, {
  "headerText": "Assessed Date",
  "field": "AssessedDate",
  "frozenEdge": "end"
}, {
  "headerText": "Paid By",
  "field": "PaidBy",
  "frozenEdge": "end"
}, {
  "headerClassName": "table-header table-row-botton",
  "className": "table-row-botton"
}]

Working code for Firefox:

function isValidColumn(column, ignoreFR) {
  var retVal = true;
  if (!column.hasOwnProperty('field')) {
    return false;
  }
  return retVal;
}

var array = [{
  "style": "width: 10px; text-align: center",
  "className": "oj-sm-only-hide table",
  "headerClassName": "Sample"
}, {
  "headerText": "Fee Description",
  "field": "Description"
}, {
  "headerText": "Amount",
  "field": "FeeAmount",
  "frozenEdge": "start"
}, {
  "headerText": "Currency",
  "field": "CurrencyCode",
  "frozenEdge": "start"
}, {
  "headerText": "Status",
  "field": "FeeStatus",
}, {
  "headerText": "Department",
  "field": "DepartmentDescription"
}, {
  "headerText": "Assessed Date",
  "field": "AssessedDate",
  "frozenEdge": "end"
}, {
  "headerText": "Payment Date",
  "field": "PaymentDate"
}, {
  "headerText": "Paid By",
  "field": "PaidBy",
  "frozenEdge": "end"
}, {
  "headerText": "Invoice",
  "field": "Invoice"
}, {
  "headerClassName": "table-header table-row-botton",
  "className": "table-row-botton"
}];

array.sort(
  function(col1, col2) {
    if (isValidColumn(col1, true) && isValidColumn(col2, true)) {

      if (col2.hasOwnProperty('frozenEdge') &&
        col2.frozenEdge == 'start') {
        return (col2.frozenEdge === 'start' && col1.frozenEdge !== 'start') ? 1 :
          (col1.frozenEdge === 'start') ? -1 : 0;
      } else if (col1.hasOwnProperty('frozenEdge') &&
        col1.frozenEdge == 'end') {
        return (col1.frozenEdge == 'end' && col2.frozenEdge !== 'end') ? 1 :
          (col1.frozenEdge === 'end') ? -1 : 0;
      } else {
        return 0;
      }
    } else {
      return 0;
    }
  }
);

console.log(array);

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

Nina Scholz · Accepted Answer · 2021-11-04 19:41:07Z

You could take an object with the wanted order and check field first.

const
    order = { start: -1, default: 0, end: 1 },
    data = [{ style: "width: 10px; text-align: center", className: "oj-sm-only-hide table", headerClassName: "Sample" }, { headerText: "Fee Description", field: "Description" }, { headerText: "Amount", field: "FeeAmount", frozenEdge: "start" }, { headerText: "Currency", field: "CurrencyCode", frozenEdge: "start" }, { headerText: "Status", field: "FeeStatus" }, { headerText: "Department", field: "DepartmentDescription" }, { headerText: "Assessed Date", field: "AssessedDate", frozenEdge: "end" }, { headerText: "Payment Date", field: "PaymentDate" }, { headerText: "Paid By", field: "PaidBy", frozenEdge: "end" }, { headerText: "Invoice", field: "Invoice" }, { headerClassName: "table-header table-row-botton", className: "table-row-botton" }];

data.sort((a, b) => 
    a.field && b.field &&
    (order[a.frozenEdge] || order.default) - (order[b.frozenEdge] || order.default)
);

console.log(data);

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

WashirePie · Accepted Answer · 2021-11-04 19:03:08Z

This should work, if you want items with frozenEdge: "start" on top and frozenEdge: "end" on the bottom:

array.sort((x, y) => {
    if (y.frozenEdge === undefined && x.frozenEdge == undefined) return 0

    if (y.frozenEdge === undefined && x.frozenEdge == "end") return 1
    if (y.frozenEdge === undefined && x.frozenEdge == "start") return -1

    if (y.frozenEdge == "end" && x.frozenEdge == undefined) return -1
    if (y.frozenEdge == "start" && x.frozenEdge == undefined ) return 1
})

Checkout mdn docs on Array.prototype.sort() for more info.

It seems that in your "Expected Output" snippet you actually wanted to keep the first and last elements of the array at their indices before sorting. I'd suggest to pop() and shift() the last and first items respectively, something like this:

const first = array.shift()
const last = array.pop()

array = array.sort( /*...*/ )

array = [first, ...array, last]

Collectives™ on Stack Overflow

How to sort Object array based on property

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related