REVISION:
To provide more clarity on the issue, I have recorded a bug using quicktime. Here is the link for your reference:
For additional code details, please visit:
ORIGINAL INQUIRY:
A strange issue has come up while working with Meteor and its dependency Underscore.js. While sorting an array of objects functions properly, reversing the process seems to cause data loss within the objects.
I have created a table with a sticky header and dynamically populate the table body.
https://i.sstatic.net/XFls4.png
When clicking on a column in the table header, the following code snippet is triggered:
if (sortId != event.target.id) {
sortAsc = true;
sortId = event.target.id;
}
if (!sortAsc) {
requirements = _.sortBy(requirements, event.target.id).reverse();
} else {
requirements = _.sortBy(requirements, event.target.id);
}
sortAsc = !sortAsc;
CreateTable();
The sortId
represents the key being used for sorting, obtained from event.target.id
. The boolean sortAsc
determines the sorting order. The array requirements
holds data structured like:
[
{
Status: "Something",
ID: 1,
Description: "Hahaha, yes!",
Category: "Category: Dairy",
segment: 1
},
{
//etc...
}
]
Through Underscore.js
, the array is sorted with
_.sortBy([collection], [property to sort by]);
. However, upon reversing the sorted array, a property deletion occurs in all objects resulting in missing columns and disrupted styling:
https://i.sstatic.net/UaGU0.png
https://i.sstatic.net/WrPbx.png
After reversing the array, the Status
property vanishes from all objects causing issues. Even attempts to manually specify a sorting function or reverse standard JavaScript sorting methods also lead to data loss.
If anyone can shed some light on this issue, any assistance would be greatly appreciated!