1

I'm trying to filter out some body of data from my mongoDB collection with the li data-filter. I have never done this is thus inexperienced. My code doesn't work, please check it out and lend me a hand.

(function ($) {
"use strict";

// Porfolio isotope and filter
$(window).on('load', function () {
    var portfolioIsotope = $('.portfolio-container').isotope({
      itemSelector: '.portfolio-item'
    });
    $('#portfolio-filter li').on( 'click', function() {
      $("#portfolio-filter li").removeClass('filter-active');
      $(this).addClass('filter-active');

      $("#portfolio-filter li button").removeClass('btn-primary');
      $(this).children('button').addClass('btn-primary');
  
      portfolioIsotope.isotope({ filter: $(this).data('filter') });
    });
  });

})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 col-md-12 col-sm-12 col-10">
            <ul id="portfolio-filter">
                <li data-filter="*" class="filter-active"><button>Everything</button> </li>
                <% categories.forEach(cat => { %>
                    <li data-filter=".filter-<% cat.name %>"><button><%= cat.formal %></button></li>
                <% }); %>
            </ul>
        </div>
               
        <div class="portfolio-container row d-flex d-flex justify-content-center center">
        <% if(noMatch && noMatch.length > 0){ %>
            <div class="alert alert-danger" style="height: 50px;" role="alert">
                <h1 style="font-size: 20.8px;"> <%= noMatch %> </h1>
            </div>
        <% }; %>


        <% let count = 0; %>
        <% projects.forEach((project) => { %>
        <% count = count === 3 ? 0 : count; %>      

            <div class="col-lg-6 col-md-6 col-sm-6 col-10 mb-4 <%= project.categories ? project.categories.split(' ').map(el=>'filter-'+el).join(' ') : 'null' %>" data-wow-delay="0.<%= count %>s">   
    
                <div class="card card h-100 border-0 shadow rounded-0">           
                    <div class="card-img-top">
                        <p class="card-title mt-0 mb-0 grid-style" > <i class="bar"></i> <%= project.name %></p>           
                        <div class="embed-responsive-item">
                            <a href="/projects/<%= project.slug %>"> 
                                <img src="<%= project.image %>" alt="" class="img-fluid w-100" />
                            </a>
                        </div>            
                    </div>  
                </div>
            </div>
            <% count++; %>
        
        <% }); %>

I also have a isotope.pkgd.js library which i chose not to include in the code posted. I also have a categories.js file with which consists of an object with key-value pairs (name: - formal:). This file is also correctly required in my app.js. Only place I haven't done any changes in is my routes/project.js but this is because I have no idea what kind of changes I'd have to do there. Appreciate all the help i can get!

Kemura
  • 35
  • 6
  • `My code doesn't work` isn't clear. What is is doing wrong or not doing as expected? Do you have errors in [console](https://webmasters.stackexchange.com/questions/8525/how-do-i-open-the-javascript-console-in-different-browsers)? – Louys Patrice Bessette Mar 28 '20 at 19:09
  • And [this answer](https://stackoverflow.com/a/25229692/2159528) may help... – Louys Patrice Bessette Mar 28 '20 at 19:13
  • @LouysPatriceBessette **my code doesnt work** in the since that it doesn't filter out anything. Its logical error since I'm obviously missing something. I figured it out which was that i forgot to give my **div** the class of *project-item*. The issue i have now is figuring out how to filter out with the rest of the buttons apart from **everything**. This is not a react project and im following the [link](https://isotope.metafizzy.co/filtering.html) guide – Kemura Mar 28 '20 at 19:31
  • *...i forgot to give my div the class of project-item.*... Good, but shouldn't it be `element-item`? And did you add the filtering classes like `filter-<% cat.name %>`? --- Then, try to console.log `$(this).data('filter')` just above `portfolioIsotope.isotope({ filter: $(this).data('filter') });` and also console log `$("."+$(this).data('filter')).length` to make sure there are target elements... – Louys Patrice Bessette Mar 28 '20 at 19:45
  • @LouysPatriceBessette I'm following the guide *partially*, since I'm not working with **hardcoded data** like in the example but rather recieving data from my **mongoDB** I had to adjust it. When console logging **everything** it returns *"*"*, while every other button returns *".filter-*. I added my **filter-<% cat.name %> to my **categories** forEach loop *of* the categories.js file. Other than that I'm trying to use a ternary operator to add the correct **project** as you can see in the above code. But Isn't giving any results and no error shows – Kemura Mar 28 '20 at 20:11
  • Can you edit your question with the code you actually have (including all addition made)? I think that would help. ;) – Louys Patrice Bessette Mar 28 '20 at 20:50
  • @LouysPatriceBessette I solved it! I forgot some crucial ejs syntax and I also forgot to add my **project-item** class to a certain *div*. I can now more or less filter out my projects. Problem now is that I only can filter out projects if their *categories* key value pair is set to *string* in my schema. This means I cant group multiple categories together to a certain project, they're all bound just to have **one** category. Oh well, atleast I'm on step closer! Reason why I didnt include all code was because its to big of a project, this way I narrowed it down to most likely faults! – Kemura Mar 29 '20 at 14:12

0 Answers0