Show List According To The Letter Clicked In Jade Data Retrieve From Mongodb

I sent my data to pug file as data.brand_name to show all brand Now i want to show the brands according to alphabets. I want when i click on a letter 'a' then it only show a list

Solution 1:

You can jQuery to achive your goal. But first of all you need to add a additional class for parent div of brand names (in this case I used .brands) and add an attribute for h4 element to store brand names.

.brands
    foreach brand in data   
        h4(name=brand.brand_name) brand- #{brand.brand_name} 

Then include jQuery to your page and use following script after page load.

$(".drug_alphabets a").on("click", function() {

    var clickedLetter = $(this).text()

    $(".brands h4").each(function() {
        var brandName = $(this).attr("name")
        if (brandName && brandName.toLowerCase()[0] == clickedLetter.toLowerCase()) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

})

Here is working snippet : https://codepen.io/anon/pen/ZavPNo