Tengo una matriz que es plana y ya está ordenada correctamente. Para mostrarlo en la interfaz de usuario, necesito ordenarlo, por placeId , manteniendo el orden de placeId , así como el orden de los elementos en la propiedad de data .
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 }, ], }, ] Basado en este enfoque , encontré la siguiente solución que contiene lodash . Sin embargo, no puedo aplicarlo a la estructura anidada de mi caso.
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();Dado que su sortedArray ya está ordenado correctamente, parece que ejecutar su código sin .sortBy en la cadena lodash ya le daría el resultado esperado.
Sin embargo, si entiendo la pregunta correctamente, le gustaría mantener el orden groupBy basado en placeId tal como está ordenado en sortedArray (que está ordenado por id ), ¿correcto? Si es así, une las correcciones a tu código:
.sortBy debe ser item => sortedData.indexOf(item[0])placeId es el mismo para cada elemento en la matriz de data , la propiedad place puede ser igual al primer valor de placeId en la matriz ordenada: place: value[0].placeIdAquí hay un ejemplo:
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>