Sort Proxy Array of Objects, localeCompare is not a function

Question

Trying to use ES6 arrayObj.sort(a,b) => a.property.localeCompare(b.property) syntax but getting error:

TypeError: a.property.localeCompare is not a function.

I'm thinking localeCompare is not in scope but do not understand how to bind it to the scope of sort, perhaps because the data is stored in a proxy? I'm also working within VueJS 3 but don't think that is relevant to this issue.

myData = 
Proxy {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}}
[[Handler]]: Object
[[Target]]: Array(5)
0: {itemIndex: 1, itemFmt: 2, itemFmtName: 'Call To Order', guid: 'd66af412-00a0-4c49-b8b5-abaefb79fed0', maxCt: 1, …}
1: {itemIndex: 2, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '9f7b9d34-3fcb-42c7-866e-a56f71a8aa4f', maxCt: 0, …}
2: {itemIndex: 4, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '406bea5e-1cb0-4d90-96e9-9b80b64ff8ba', maxCt: 0, …}
3: {itemIndex: 5, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: 'ad9aacda-5100-4eef-9ead-c61e1ec0c285', maxCt: 0, …}
4: {itemIndex: 7, itemFmt: 3, itemFmtName: 'Roll Call', guid: '1715f7a3-066d-4787-8233-a36df2a729a9', maxCt: 1, …}

myData.sort((a, b) => a.itemIndex.localeCompare(b.itemIndex))

Aunt

Answer 1

localeCompare is a method of String, but a.itemIndex is a Number, so the method would not be available on that property.

To sort by itemIndex, use subtraction on the two Numbers:

const myData = [
  {itemIndex: 1, itemFmt: 2, itemFmtName: 'Call To Order', guid: 'd66af412-00a0-4c49-b8b5-abaefb79fed0', maxCt: 1 },
  {itemIndex: 2, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '9f7b9d34-3fcb-42c7-866e-a56f71a8aa4f', maxCt: 0},
  {itemIndex: 4, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '406bea5e-1cb0-4d90-96e9-9b80b64ff8ba', maxCt: 0},
  {itemIndex: 5, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: 'ad9aacda-5100-4eef-9ead-c61e1ec0c285', maxCt: 0},
  {itemIndex: 7, itemFmt: 3, itemFmtName: 'Roll Call', guid: '1715f7a3-066d-4787-8233-a36df2a729a9', maxCt: 1},
]

// sort by itemIndex in ascending order
myData.sort((a,b) => a.itemIndex - b.itemIndex)

console.log(myData)

To sort by itemFmtName, use localeCompare on the two Strings:

const myData = [
  {itemIndex: 1, itemFmt: 2, itemFmtName: 'Call To Order', guid: 'd66af412-00a0-4c49-b8b5-abaefb79fed0', maxCt: 1 },
  {itemIndex: 2, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '9f7b9d34-3fcb-42c7-866e-a56f71a8aa4f', maxCt: 0},
  {itemIndex: 4, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '406bea5e-1cb0-4d90-96e9-9b80b64ff8ba', maxCt: 0},
  {itemIndex: 5, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: 'ad9aacda-5100-4eef-9ead-c61e1ec0c285', maxCt: 0},
  {itemIndex: 7, itemFmt: 3, itemFmtName: 'Roll Call', guid: '1715f7a3-066d-4787-8233-a36df2a729a9', maxCt: 1},
]

// sort by itemFmtName in alphabetical order
myData.sort((a,b) => a.itemFmtName.localeCompare(b.itemFmtName))

console.log(myData)

Margaret

Answer 2

As already mentioned, localCompare works with strings.

Here is a helper function that checks whether the sort attribute is a string or a number.

const data = [
  { index: 4, value: 'c' },
  { index: 2, value: 'a' },
  { index: 3, value: 'b' },
  { index: 1, value: 'd' },
]

const sortHelper = (data, sortBy) => {
  if (data.find(x => typeof x[sortBy] !== 'number')) 
    // sort by localeCompare
    return data.sort((a,b) => a[sortBy].localeCompare(b[sortBy]))
  else
    // sort by number
    return data.sort((a,b) => a[sortBy] - b[sortBy])
}

console.log(sortHelper(data, 'index'));
console.log(sortHelper(data, 'value'));

Parallelism

Answer 3

Just add toString()

fails ...

stuff.sort((a, b) => a.name.localeCompare(b.toString()))

how to ...

stuff.sort((a, b) => a.name.toString().localeCompare(b.name.toString()))

Stringhalt