1. MDB Home Page
  2. Support Main Page
  3. MDB Standard
Topic: Filter plugin and mongoDb

goodfellastech priority asked 2 years ago

Expected behavior I am trying to use a for-each loop for the filters plugin that gets data from a MongoDB URI. I am realizing that after starting to work on getting the loop going that the filter is not finding the mdb data targets since they are loading after the filter instance. Dev environment is MEAN stack

Resources (screenshots, code snippets etc.)

const arrayExampleFilters = document.getElementById('array-example-filters');
const arrayExampleData = document.getElementById('array-example-data');
const arrayReset = document.getElementById('arrayReset');

const dataset = [Does your mongo loop result go here?];

const arrayInstance = new Filters(arrayExampleFilters, {
  items: dataset,
});

const renderItems = (items) => {
  const elements = items.map((item) => {
    const template = `
      <div class="col-md-4 mt-3">
        <div class="card shadow-2">
          <img src="${item.img}"
            class="card-img-top" alt="..." />

          <div class="card-body">
            <h5 class="card-title">${item.product}</h5>
            <p class="card-text">
              ${item.price}$
            </p>
            <a href="#" class="btn btn-primary ripple-surface">Buy now</a>
          </div>
        </div>
      </div>
    `;
    return template;
  });

  arrayExampleData.innerHTML = elements.join('\n');
};

renderItems(dataset);

arrayExampleFilters.addEventListener('update.mdb.filters', (e) => {
  renderItems(e.items);
});

arrayReset.addEventListener('click', () => {
  arrayInstance.clear();
});

I am not sure exactly where to get my looped results. Once I can get that path organized I can then easily edit the rest of the template file to change it to what I need. I just need to know exactly where the monogDB loop should go to get the data stored from my database to become the dataset for the filter.

i can provide full code if needed.

Mateusz Lazaru staff answered 2 years ago

Your loop result should go to the dataset variable as an array of objects, like in the docs example:

const dataset = [
  {
    id: 1,
    color: 'black',
    price: 100,
    sale: 'no',
    product: 'Black Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    id: 2,
    color: 'black',
    price: 100,
    sale: 'no',
    product: 'Black Jeans Jacket',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
  },
  {
    id: 3,
    color: 'gray',
    price: 80,
    sale: 'yes',
    product: 'Gray Jumper',
    img: 'https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
  },
]

As you noted, loop must be finished before creating the arrayInstance and calling renderItems() function.

goodfellastech priority commented 2 years ago

So I guess I am a little confused on how to actually write the code to get the mongoDB results from the Node JS route to actually be grabbed by the dataset variable.in my EJS template I am running this loop:

    <% Resources.forEach(function(resource){ %>
    <div class="col-md-4 col-12 mb-3" data-mdb-category="<%=resource.category%>" data-mdb-price="<%=resource.price%>">
      <div class="card h-100 border no-shadow">
        <img src="<%= resource.image %>" class="card-img-top">
        <div class="card-header gradient-blue text-light fw-bold">
          <h2 class="text-center fw-bold"><%= resource.title %></h2>
        </div>
        <div class="card-body pt-0 d-flex flex-column">
          <div class="row my-2 rounded">
            <div class="col text-center">
              <h5 class="m-0 p-0 fw-bold">Category</h5>
              <p class="m-0 p-0 text-uppercase"><%= resource.category %></p>
            </div>
            <div class="col text-center">
              <h5 class="m-0 p-0 fw-bold">Value</h5>
              <p class="m-0 p-0 text-uppercase"><%= resource.value %></p>
            </div>
            <div class="col text-center">
              <h5 class="m-0 p-0 fw-bold">Price</h5>
              <p class="m-0 p-0 text-uppercase"><%= resource.price %></p>
            </div>
          </div>
          <p class="card-text"><%= resource.excerpt %></p>
          <div class="mt-auto">
            <div class="text-center">
              <a class="btn btn-rounded btn-lg btn-primary m-1" href="#"><i class="fa-duotone fa-circle-info fa-lg"></i> More</a><a class="btn btn-lg btn-rounded bg-insider link-dark m-1" href="<%=resource.url %>" target="_blank">Use it <i class="fa-solid fa-square-up-right fa-lg"></i></a>
            </div>
            <div class="text-center my-3">
              <a class="btn rounded btn-warning" href="/insider/<%=resource._id%>/edit">EDIT <%= resource.title %></a>
              <form class="my-3" id="delete-form"action="/insider/<%=resource._id%>?_method=DELETE" method="POST">
                  <button class="btn btn-danger">Delete</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <% }); %>

So I am not sure how to take that loop and the Resources that is passed in to the EJS from the Node JS route into the dataset variable in the js file I am working on. I am attaching the filters logic at the bottom with this:

<script type="text/javascript" src="/assets/js/filter-logic.js"></script>

I have looked at several StackOverflow articles and I am kind of confused. Any help would be appreciated!

goodfellastech priority commented 2 years ago

I figured out how to pass it correctly. i was missing a script tag that passed the ejs variable to the filter-logic file like so: <script type="text/javascript"> let dataset = <%- JSON.stringify(Resources) %> </script>

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: mac OSX
  • Browser: chrome
  • OS: Monterey
  • Provided sample code: No
  • Provided link: No
Tags
filter node
About author
goodfellastech
10Support score
8Questions 0Answers 1Snippets