Filtering author alphabetically

Developer help Installation
1

Hey All

Is there a way to filter authors alphabetically according to their first name?

Matt

2

Hey there :wave:, that can be done with the order option in the #get helper: Ghost Handlebars Theme Helpers: get

Something like this:

{{#get "authors" limit="all" order="name asc"}}
  {{#foreach authors}}
    {{ name }}
  {{/foreach}}
{{/get}}
3

Hey @DavidDarnes

Thanks mate. Sorry, I should have worded differently. What if I only want to retrive all those starting with A?

4

Oh right, that’s a very specific use case. Are you trying to setup some kind of directory of authors?

5

Hey @DavidDarnes

I’m trying to organize my authors. Our site lists quotes with authors. I want to set up a filter below the title so users can sort authors by A, B, C, etc. https://quotesaday.com/authors/

6

I see! You could do a nice filtering mechanism with a <select> element and a little bit of JavaScript. I put something together on CodePen if you want to take a look:

This would add a selectable filter at the top of the page. I also added some CSS that will hide it if the JavaScript fails to load

7

@DavidDarnes DUDE thank you!

Wow man, I wasn’t expecting you to do this. This is exactly what I was trying to acheive. Thank you so much David.

You guys have the best community and service of any application or service.

2 Likes
8

No problem at all @Mattches :heart_decoration:

9

Hey @DavidDarnes

I’ve installed this on localhost to test. If I select A and then B for example, B comes out blank. I have to select All Authors to refresh and then select B to filter. I’m assuming this has to do with a GET from the database?

Is there something I need to add to the JS so it will refresh without having to select All Authors first?

Thanks

10

Hmm that’s odd. The example doesn’t use any of the template code, it’s all front-end JavaScript. You might have to check your browser console to see what’s happening

11

Here is the error:
[Violation] ‘change’ handler took 437ms
[Violation] Forced reflow while executing JavaScript took 425ms

And this is the JS it’s referring to:

            select.addEventListener("change", event => {
            namesList.map(nameItem => {
                if (
                    nameItem.innerText.substring(0, 1) == event.target.value ||
                    event.target.value == ""
                ) {
                    nameItem.removeAttribute("style");
                } else {
                    nameItem.style.display = "none";
                }
            });
        });

Any ideas on what could be going wrong?

12

I think I do, I think there’s some sort of matching error going on that I didn’t account for. Here’s what that code you referenced should be:

select.addEventListener("change", event => {
	namesList.map(nameItem => {
		nameItem.removeAttribute("style");
		if (
			event.target.value.length &&
			nameItem.innerText.substring(0, 1) != event.target.value
		) {
			nameItem.style.display = "none";
		}
	});
});

I’ve also updated the CodePen: https://codepen.io/daviddarnes/pen/ZEzZYKw?editors=0010

13

@DavidDarnes legend mate thanks. Worked.

1 Like