Estoy tratando de ordenar una matriz de objetos por tasa y orden alfabético.
Así que lo ordené por tasa con éxito. PERO EL PROBLEMA es que cuando intenté clasificarlo por orden alfabético, no funciona. No tengo idea de cómo ordenarlo de nuevo por orden alfabético.
El código fuente y el resultado se escriben en la parte inferior.
// This is the success result that I want to get **(sorted by rate && sorted by alphabetic order)** { abcd ( title) lorem ipsum (comment) 5 (rate) }, { efg lorem ipsum 5 }, { bdg lorem ipsum 3 }, { def lorem ipsum 3 }, { abc lorem ipsum 1 }Código fuente
const Reviews = ({ books, initialData }) => { const combinedBooks = initialData.concat(books); // sort by rate let sorted = combinedBooks.sort((a, b) => { return b.score - a.score; }); // sort by alphabetical order let newSorted = sorted.sort(function (a, b) { let fa = a.title.toLowerCase(), fb = b.title.toLowerCase(); if (fa < fb) { return -1; } if (fa > fb) { return 1; } return 0; }); return ( <section style={{ border: "3px solid green" }}> <Header title="Book Review Lists" /> {sorted.map((review) => { const { id, title, comment, score } = review; return ( <Review key={id} title={title} comment={comment} score={score} /> ); })} </section> ); }; export default Reviews;//Resultado de código
{ abc lorem ipsum 1 }, { abcd lorem ipsum 5 }, { bdg lorem ipsum 3 }, { def lorem ipsum 3 }, { efg ( book title) lorem ipsum ( book review ) 5 (rate) },Estaba ordenando por tasa primero, luego ordenando alfabéticamente, por lo que estaba obteniendo los elementos en orden alfabético, luego por rango si dos elementos tienen el mismo orden alfabético.
Para ordenar esa lista alfabética por rango, hacemos esto:
let newerSorted = [...newSorted].sort((a, b) => { return b.score - a.score; });Entonces, la lista ahora está ordenada por rango y los elementos con el mismo rango están ordenados alfabéticamente.
Ejemplo de trabajo:
const Reviews = ({ books, initialData }) => { const combinedBooks = initialData.concat(books); // sort by rate let sorted = combinedBooks.sort((a, b) => { return b.score - a.score; }); // sort by alphabetical order let newSorted = sorted.sort(function (a, b) { let fa = a.title.toLowerCase(), fb = b.title.toLowerCase(); if (fa < fb) { return -1; } if (fa > fb) { return 1; } return 0; }); let newerSorted = [...newSorted].sort((a, b) => { return b.score - a.score; }); const Review = (props) => { return( <li key={props.key}>{props.title} - {props.score}</li> ); } return ( <div> <section style={{ border: "3px solid green" }}> <p>Sorted alphabetically, then by rank</p> {newSorted.map((review) => { const { id, title, comment, score } = review; return ( <Review key={id} title={title} comment={comment} score={score} /> ); })} </section> <section style={{ border: "3px solid green" }}> <p>Sorted by rank, then alphabetically</p> {newerSorted.map((review) => { const { id, title, comment, score } = review; return ( <Review key={id} title={title} comment={comment} score={score} /> ); })} </section> </div> ); }; let initialData = [ { id: 27641, title: "abc", comment: "m ipsum", score: 1 }, { id: 121232, title: "zdseru", comment: 'lorem ipsum', score: 5, }, { id: 121232, title: "adseru", comment: 'lorem ipsum', score: 5, }, { id: 41, title: "new title", comment: "lorem ipsum", score: 3 }, { id: 27641, title: "xef", comment: "lorem ipsum", score: 3 }, { id: 33542, title: "ifg", comment: "lorem ipsum ( book review )", score: 2 },]; let books = [{ id: 33542, title: "new title", comment: "comment", score: 1 }]; ReactDOM.render(<Reviews books={books} initialData={initialData}/>, document.getElementById('sort')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="sort"></div>