I am trying to sort through an array of objects from an API call. I've tried a few things and they haven't worked. Currently what I have tried is to sort the array first and then map through it and then display it. The mapping works but not the sorting.
This is the object
{
"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",
}
However, no sorting is taking place. The timestamp is in this format:
"2017-06-25T20:50:11Z"
When I isolated this into an array, the timestamps were sorted. See below.
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"
]
However, I tried chaining the .map method after this, it didn't work. This is what I have so far -
<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>
))}
I suspect it is a path issue. I've tried changing the return statement like removing the 'created_at' or swapping the arguments. What am I missing? Do I need to push them into a separate array and then map through them again?
I hope this was enough information.
SOLVED --
it was missing 'new Date'
{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>
))}
The callback function .map((d,t,s,u,p)=> ( takes 5 arguments but map's callback function only takes 3 arguments they are in sequence
Also, in your case it is sufficient to pass a unique key to div tag.
Update 1 Rearrange your sort and map code like below,
{
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>)
}