Anson LowZF Blog

moon indicating dark mode
sun indicating light mode

How I Sort Blog Post With Vanilla JavaScript

April 27, 2020 #JavaScript

Gatsby.js is using GraphQL to query data, we can sort and return the data in descending order. No JavaScript is required. With GraphQL interactive playground, it’s even simple, you just click you want the data is descending order then copy and paste your query in your Gatsby.js project. Thats all, cool right?

While I am learning Next.js with my limited JavaScript knowledge, suddenly i see this code block…

frontmatterData.sort((a, b) => {
if (a.date < b.date) {
return -1
} else {
return 1
}
})

My head is fainting, what this a.date or b.date does?

Why not just write earlyDate < laterDate? laterDate is greater than earlyDate, so laterDate go top first.

Why must return this 1 or -1 thing?

Ahhh…

I head to MDN JavaScript sort() docs read it again and again. I started to pick up during the fourth time of reading.

A few moment later…

Array.sort()

Finally, I’ve some clue about how this array.sort() works

In order to understand sorting blogpost in Markdown and output to blog index page, you need to understand how frontmatter work first before you can understand how to sort blogpost by date, id, or any property you want. Normally, we sort the blogpost by the latest date on top, older post come later.

Sort Array of Objects

We can sort by the value inside the object.

Let’s look at some simple frontmatter. I know the output of frontmatter is an array of objects in JSON:-

const frontmatterData = [
{ "title": "a", "date": `2020-03-01`, "text": "a..." },
{ "title": "b", "date": `2020-03-02`, "text": "b..." },
{ "title": "c", "date": `2020-03-03`, "text": "c..." },
{ "title": "d", "date": `2020-03-04`, "text": "d..." },
{ "title": "e", "date": `2020-03-05`, "text": "e..." },
]

If we want to sort based on the date, we access the date with the parameter we provide,

Let’s look at the code again, “a” and “b” are the parameter we provide to the function.

frontmatterData.sort((a, b) => {
if (a.date < b.date) {
return -1
} else {
return 1
}
})

In this case, we access date with dot notation - a.date.

We can also sort by title (a.title, b.title), by description (a.description, b.description). What being sorted are alphabet of the title or description.

To decide which come first or later, we compare the value of the parameters,

Based on my understanding,

When comparing a.date with b.date return 0, sort remain unchange

If a > b, return 1 which is greater than 0, index a > index b, said index a is 1, index b = 0, then “b” come first = sort in descending order

If a < b, return -1 which is lesser than 0, index a < index b, said index a is 1, index b = 2, then “a” come first = sort in ascending order.

Note: If I understand it wrong way, please reach me out @ Twitter to share your thought with me. Your kindness is much appreciated.

We can just change the greater (>) and the lesser (<) sign with same return value will change ascending or descending order

Or swap the -1 and 1 value will also work

If you want test it out yourself:-

Edit How to sort blog post with vanilla JavaScript

Check your result in the console


A self-taught developer documenting and sharing his learning experience.
React.js • Gatsby.js • Next.js soon. More about me