Quiero ordenar mi matriz actual teniendo live al frente, en lugar de ordenarla alfabéticamente para que los elementos con live estén al frente, seguidos por el schedule y, por último, end , pero la forma en que lo estoy haciendo ahora con localeCompare , solo se ordenará alfabéticamente.
Entonces, ¿cómo puedo hacerlo para ordenar la matriz de la manera específica que quiero?
Ejemplo de matriz antes de ordenar
const [bulletins] = useState([ { id: 1, liveStatus: 'live', }, { id: 2, liveStatus: 'live', }, { id: 3, liveStatus: 'end', }, { id: 4, liveStatus: 'schedule', }, { id: 5, liveStatus: 'end', } ]);Ejemplo de matriz ordenada
const [bulletins] = useState([ { id: 3, liveStatus: 'end', }, { id: 5, liveStatus: 'end', }, { id: 2, liveStatus: 'live', }, { id: 1, liveStatus: 'live', }, { id: 4, liveStatus: 'schedule', } ]); const displayBulletins = bulletins .sort((a,b) => { return a.liveStatus.localeCompare(b.liveStatus) }) .map((bulletin) => { return ( <Fragment key={bulletin.id}> <BulletinList bulletin={bulletin} /> </Fragment> ); })Puede usar indexOf para verificar la primera letra en una lista de letras ordenadas ('lse' en este caso):
const bulletins = [{id: 1,liveStatus: 'live',},{id: 2,liveStatus: 'live',},{id: 3,liveStatus: 'end',},{id: 4,liveStatus: 'schedule',},{id: 5,liveStatus: 'end',}]; bulletins.sort((a, b) => 'lse'.indexOf(a.liveStatus[0]) - 'lse'.indexOf(b.liveStatus[0])); console.log(bulletins);Entonces no es necesario ordenar los elementos, todo lo que puede usar es reducir y organizar de la manera que desee
const arr = [ { id: 1, liveStatus: "live", }, { id: 2, liveStatus: "live", }, { id: 3, liveStatus: "end", }, { id: 4, liveStatus: "schedule", }, { id: 5, liveStatus: "end", }, ]; const dict = { live: 0, schedule: 1, end: 2 }; const resultObj = Array.from({ length: Object.keys(dict).length + 1 }, () => []); const result = arr .reduce((acc, curr) => { acc[dict[curr.liveStatus] ?? resultObj.length - 1].push(curr); return acc; }, resultObj) .flat(); console.log(result); /* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */ .as-console-wrapper { max-height: 100% !important; top: 0; }