CODEWITHSUNDEEP
meteor
Alex
Alex

Reputation: 1642

Meteor: return ._id of a selected value from dropdown and feed to another dropdown

I'm trying to study Meteor with a simple example to populate two dropdowns where one is a list of fruit and another one is the color according to the fruit chosen:

collection (ProductList): 

    a = new Array();
    a.push({color:"orange"});
    a.push({color:"red"});  
    ProductList.insert({ product: "Orange", a });   
    a = new Array();
    a.push({color:"green"});
    a.push({color:"red"});      
    ProductList.insert({ product: "Apple", a });
    a = new Array();
    a.push({color:"green"});
    a.push({color:"yellow"})
    ProductList.insert({ product: "Banana", a });

html (dropdown menu): 

<template name="prodlist">
<select id="category-select">
        <option disabled="disabled" selected="selected">Please Select</option> 
        {{#each prodlist}}
            <option value="{{this}}">{{this}}</option>
        {{/each}}
    </select>
</template>

js: 

Template.prodlist.events({
    "change #category-select": function (event, template) {

        var category_prod = $(event.currentTarget).val();
        //this return the correct element selected in the dropdown(i.e Orange Apple Banana)  
        console.log("category : " + category_prod);             
        var productID = ProductList.findOne({product: category_prod })._id                          
        console.log("current ID: " + productID);
    }
});

Please see the ****** above for my first question This has been solved by chrisklaussner. Code updated.

Also I'm trying to feed the ._id (saved to productID) found to the second dropdown:
html: 

<template name="colorlist">
<select id="category-select">
        <option disabled="disabled" selected="selected">colors</option> 
        {{#each colorlist}}
            <option value="{{this}}">{{this}}</option>
        {{/each}}
    </select>
</template>

js: 

Template.colorlist.helpers({
    colorlist: function () {
        const ans = productID.get();
        const product = ProductList.findOne({ _id: ans});
        if (product) {
                    return product.a.map(function (doc) {
            return doc.color;
            });
        }        
    }
});

Please see the ****** above for my second question This has been resolved.

EDIT: This question has been resolved and the Original post contains the correct answer

Upvotes: 0

Views: 177

Answers (1)

klaussner
klaussner

Reputation: 2384

You have a mistake in the findOne calls. The first parameter (where you pass {}) is the selector that specifies what you want to fetch. The second one is for options.

For example, ProductList.findOne({ product: category_prod })._id should give you the right product ID. In your case, the selector {} matches all products in the collection and findOne returns the first of them. That's why you always get the same ID.

Upvotes: 1

Related Questions