I have an array that is flat and already properly ordered. To display it in the UI, I need to sort it, by the placeId, keeping the placeId order, as well as the order of elements in the data property.
const sortedData = [
{ id: 1, placeId: 12 },
{ id: 5, placeId: 12 },
{ id: 8, placeId: 31 },
{ id: 16, placeId: 31 },
{ id: 20, placeId: 45 },
{ id: 22, placeId: 45 },
]
// maintain order of place as well as data based on first appearance in sortedData
const uiPreparedData = [
{
place: 12,
data: [
{ id: 1, placeId: 12 },
{ id: 5, placeId: 12 },
],
},
{
place: 31,
data: [
{ id: 8, placeId: 31 },
{ id: 16, placeId: 31 },
],
},
{
place: 45,
data: [
{ id: 20, placeId: 45 },
{ id: 22, placeId: 45 },
],
},
]
Based on this approach I found the following solution containing lodash. However, I cannot apply it to the nested structure of my case.
var uiPreparedData = _.chain(sortedData)
// Group the elements of Array based on `place` property
.groupBy("placeId")
.sortBy((item) => item.indexOf(item[0]))
// `key` is group's name (place), `value` is the array of objects
.map((value, key) => ({ place: key, data: value }))
.value();
Since your sortedArray is already properly ordered, it seems running your code without .sortBy in the lodash chain would already give you the expected result.
However, if I understand the question correctly, you would like to keep the groupBy order based on placeId as it is ordered in the sortedArray (which is ordered by id), correct? If so, couple corrections to your code:
.sortBy paramater should be item => sortedData.indexOf(item[0])placeId is the same for each item in data array, the place property can be equal to the first placeId value in the sorted array: place: value[0].placeIdHere is an example:
const sortedData = [
{ id: 1, placeId: 12 },
{ id: 5, placeId: 12 },
{ id: 6, placeId: 45 }, // Added to demonstrate order
{ id: 8, placeId: 31 },
{ id: 16, placeId: 31 },
{ id: 20, placeId: 45 },
{ id: 22, placeId: 45 },
]
const uiPreparedData = _.chain(sortedData)
.groupBy("placeId")
.sortBy(item => sortedData.indexOf(item[0]))
.map((value, key) => ({ place: value[0].placeId, data: value }))
.value()
console.log(uiPreparedData)<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>