Estoy tratando de clasificar una serie de objetos de una llamada API. He probado algunas cosas y no han funcionado. Actualmente, lo que he intentado es ordenar la matriz primero y luego mapearla y luego mostrarla. El mapeo funciona pero no la clasificación.
este es el objeto
{ "labels_url": "https://api.github.com/repos/jaystack/repatch/labels{/name}", "releases_url": "https://api.github.com/repos/jaystack/repatch/releases{/id}", "deployments_url": "https://api.github.com/repos/jaystack/repatch/deployments", "created_at": "2017-06-25T20:50:11Z", } Sin embargo, no se está realizando ninguna clasificación. La marca de tiempo tiene este formato: "2017-06-25T20:50:11Z"
Cuando aislé esto en una matriz, se ordenaron las marcas de tiempo. Vea abajo.
const sortedData = ["2017-06-25T20:50:11Z","2018-06-25T20:50:11Z", "2019-06-25T20:50:11Z", "2020-06-25T20:50:11Z"]; //sorted the data with a simple function for comparing sortedData.sort(function(a,b){return a - b}) console.log(sortedData); [ "2017-06-25T20:50:11Z", "2018-06-25T20:50:11Z", "2019-06-25T20:50:11Z", "2020-06-25T20:50:11Z" ]Sin embargo, intenté encadenar el método .map después de esto, no funcionó. Esto es lo que tengo hasta ahora -
<div className="grid grid-cols-3 grid-rows-2 gap-2 bg-black text-white"> {data.items.sort(function(a,b) {return a.created_at - b.created_at}) .map((d,t,s,u,p)=> ( <div key={p} className=" border-red-600 p-5"> <h1 key={t} className="text-2xl font-bold">{d.name}</h1> <p key={d} className="mb-5">{d.description}</p> <p key={s} >{d.score}</p> <p>{d.created_at}</p> <Link key={u} href={d.html_url}> <a className="bg-white text-black font-bold rounded-lg">Click me</a> </Link> </div> ))}Sospecho que es un problema de ruta. Intenté cambiar la declaración de devolución como eliminar 'created_at' o intercambiar los argumentos. ¿Qué me estoy perdiendo? ¿Necesito insertarlos en una matriz separada y luego mapearlos nuevamente?
Espero que esto haya sido suficiente información.
SOLUCIONADO --
faltaba 'nueva fecha'
{data.items.sort(function(a,b) {return a.created_at > b.created_at}).map((b)=> <div className="grid grid-cols-3 grid-rows-2 gap-2 bg-black text-white"> {data.items.sort(function(a,b) {return new Date (b.created_at) - new Date(a.created_at)}) .map((d)=> ( <div key={d.id} className=" border-red-600 p-5"> <h1 className="text-2xl font-bold">{d.name}</h1> <p className="mb-5">{d.description}</p> <p>{d.created_at}</p> <Link href={d.html_url}> <a className="bg-white text-black font-bold rounded-lg">Click me</a> </Link> </div> ))}La función de devolución de llamada .map((d,t,s,u,p)=> ( toma 5 argumentos pero la función de devolución de llamada del mapa solo toma 3 argumentos que están en secuencia
Además, en su caso, es suficiente pasar una clave única a la etiqueta div .
Actualización 1 Reorganice su clasificación y código de mapa como se muestra a continuación,
{ data.items.sort(function(a,b) {return a.created_at - b.created_at}) .map(d => <div key={d.id} className=" border-red-600 p-5"> <h1 className="text-2xl font-bold">{d.name}</h1> <p className="mb-5">{d.description}</p> <p>{d.score}</p> <p>{d.created_at}</p> <Link href={d.html_url}> <a className="bg-white text-black font-bold rounded-lg">Click me</a> </Link> </div>) }