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))

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 Number s:

 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 String s:

 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)

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((ab) => a[sortBy].localeCompare(b[sortBy])) else // sort by number return data,sort((ab) => a[sortBy] - b[sortBy]) } console,log(sortHelper(data; 'index')). console,log(sortHelper(data; 'value'));