Fill the dropdown menu with options from a collection and automatically adjust the list based on the user's selection in the meteor

Question

Fill the dropdown menu with options from a collection and automatically adjust the list based on the user's selection in the meteor

As a newcomer to Meteor, I am facing an issue with populating a select box from a MongoDB collection. Despite my attempts, the solution I tried below did not work as expected:

<template name="clist">

<div class="input-field">
 <select>
   <option value="" disabled selected>Choose your option</option>
    {{#each company}}
      <option>{{ccategory}}</option>
    {{/each}}
 </select>
</div>

<ul class="collection" id="listings">
{{#each company}}
 <li>
  {{> employees}}
</li>
{{/each}}

</template>

Furthermore, I need assistance in filtering the data in my template based on the selection made in the dropdown list. I am currently stuck and unable to proceed.

The issue lies in the fact that the dropdown list is being populated by all listings rather than directly from the schema, resulting in repetitive values. The returning helper for both these values is identical, using "return company.find()". Any help in resolving this matter would be greatly appreciated.

javascript mongodb meteor meteor-autoform meteor-helper

Answer 1

Answer №1

To populate the select field, you need to make some changes in your code. Instead of placing the {{#each}} loop above the select tag, move it inside like this:

<select>
  <option disabled selected>Choose option</option>
{{#each company}}
  <option>{{category}}</option>
{{/each}}
</select>

Putting the {{#each}} outside the <select> tag will create a new select for each company.

The company helper function should be as simple as return company.find();

If you want to add filtering functionality, you can achieve this using various methods. One approach is demonstrated below.

I prefer using ReactiveDict();, which I'll utilize in this example.

Firstly, install it with meteor add reactive-dict

Template.example.onCreated(function(){
 var self = this;

 self.example = new ReactiveDict();

self.example.setDefault( 'valueToFilter' , null);
});

Next, on an event like change, implement the following logic.

Template.example.events({
 'change select' : function( event, template ) {

   var instance = Template.instance();

   instance.example.set( 'valueToFilter' event.target.value ); //or use $('select').val()  whatever you like to take the value;
  }
})

Finally, display the filtered results.

Template.example.helpers({

 showSelectedValues : function(){

  var instance = Template.instance();

  return Companies.find( { name : instance.example.get( 'valueToFilter' )} );
 }
})

This comprehensive guide should help you achieve your desired functionality. Best of luck!

Answer 2

To populate the select field, you need to make some changes in your code. Instead of placing the {{#each}} loop above the select tag, move it inside like this:

<select>
  <option disabled selected>Choose option</option>
{{#each company}}
  <option>{{category}}</option>
{{/each}}
</select>

Putting the {{#each}} outside the <select> tag will create a new select for each company.

The company helper function should be as simple as return company.find();

If you want to add filtering functionality, you can achieve this using various methods. One approach is demonstrated below.

I prefer using ReactiveDict();, which I'll utilize in this example.

Firstly, install it with meteor add reactive-dict

Template.example.onCreated(function(){
 var self = this;

 self.example = new ReactiveDict();

self.example.setDefault( 'valueToFilter' , null);
});

Next, on an event like change, implement the following logic.

Template.example.events({
 'change select' : function( event, template ) {

   var instance = Template.instance();

   instance.example.set( 'valueToFilter' event.target.value ); //or use $('select').val()  whatever you like to take the value;
  }
})

Finally, display the filtered results.

Template.example.helpers({

 showSelectedValues : function(){

  var instance = Template.instance();

  return Companies.find( { name : instance.example.get( 'valueToFilter' )} );
 }
})

This comprehensive guide should help you achieve your desired functionality. Best of luck!

Fill the dropdown menu with options from a collection and automatically adjust the list based on the user's selection in the meteor

Answer №1

Similar questions

Retrieve data from an HTML form and utilize it to search a JSON array for a specific value

Leveraging the div value similar to a PHP variable

Utilizing the extend method to incorporate an object into a prototype

What are the possible reasons for a checkbox not being checked in React JS?

Smooth Laplacian causing faces to disconnect

Are the shadows in the scene being affected by a problem between DirectionalLightHelper and CameraHelper?

Retrieving the text of a selected option by its value

Working with the Response Object in Django/JQuery and passing it to javascript using Urllib3

What is the process for adding content to a JSON object?

The Process of Sending Values from app.js to a Vue File in Vue.js

Retrieving the maximum values from JSON data using D3

Unable to modify the .Css file for the VueJs plugin

The functionality of AngularJS $scope does not seem to be functioning properly within a jQuery function

The potential and options of functions organized and defined within an Array

What is the best method to showcase the value in HTML using either Angular or JavaScript when the return is true or false?

Learn how to efficiently transfer row data or an array object to a component within Angular by utilizing the MatDialog feature

extracting information from an object's property

I'm confused why my pinia is still displaying as undefined. Is there a way for my app to pause until pinia has finished loading before I filter the products by ID?

Challenges with date formatting arise for Spanish speakers when the date returns as NaN or an Invalid

Looking for a JavaScript (Angular) event listener to trigger when closing pages and tabs