How to group and sort a nested array and keep the original order based on the first occurrence?

Question

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

Answer 1

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:

1. Function passed to .sortBy paramater should be item => sortedData.indexOf(item[0])
2. Since the 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].placeId

Here 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/[email protected]/lodash.min.js"></script>