Meteor Category and Subcategory Select Menu - javascript

I am new to Meteor but acquired some fair knowledge of this framework. I am creating one App in which I have to Build a Category Management Module, I am using a Category collection for this and in the document my values are like this
{
_id:
name:
parentID:
.....
}
I have tried few things to make it recursive, but failed to do it, what I need is a drop down which contains all the categories with their children. like this:
http://blog.digibali.com/wp-content/uploads/2011/03/menutree2.jpg
I would appreciate if anyone here can help in this issue:
Right Now what I am doing is fetching me to only 2 levels, I mean Top Parent and a Sub Child, I want unlimited levels for this, I know it might be possible through recursive function, but unable to find the way
Template:
<template name="categoryselect">
<select id="category" name="category" class="category">
<option value="">--Select--</option>
{{#each get_categories}}
<option value="{{_id}}">{{name}}</option>
{{#each get_sub_categories}}
{{> subcategoryselect}}
{{/each}}
{{/each}}
</select>
</template>
<template name="subcategoryselect">
<option value="{{_id}}">--{{name}}</option>
</template>
Template Helpers :
Template.categoryselect.helpers({
'get_categories': function(){
return Categories.find({parentID:''});
},
'get_sub_categories': function(){
return Categories.find({parentID:this._id});
}
});

Here's a tested solution:
html
<template name="categoryselect">
<select id="category" name="category" class="category">
<option value="">--Select--</option>
{{#each get_categories}}
<option value="{{_id}}">{{name}}</option>
{{/each}}
</select>
</template>
js
Template.categoryselect.helpers({
get_categories: function() {
var results = [];
var mapChildren = function(category, level) {
// add the appropriate number of dashes before each name
var prefix = Array(2 * level).join('--');
results.push({_id: category._id, name: prefix + category.name});
// repeat for each child category
var children = Categories.find({parentID: category._id}).fetch();
_.each(children, function(c) {
// make sure to increment the level for the correct prefix
mapChildren(c, level + 1);
});
};
// map each of the root categories - I'm unsure if the parent
// selector is correct or if it should be {parentId: {$exists: false}}
_.each(Categories.find({parentID: ''}).fetch(), function(c) {
mapChildren(c, 0);
});
// results should be an array of objects like {_id: String, name: String}
return results;
}
});

Related

Vue rendering of dynamic select options list

I have a Vue where the AJAX fetched select options are not available the FIRST time the Vue is rendered.
I have done as suggested here: https://v2.vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats.
The form is dynamically generated from a "schema" object.
<b-form-group v-for="(obj, key) in schema"
v-if="obj.type !== 'hidden'"
:label="createInputLabel(obj, key)" :label-for="key" >
...
<div v-else-if="obj.type == 'select'" role="group"
class="form-group">
<select v-model="attributes[key]" :id="key" :name="key"
class="custom-select">
<option v-for="option in optionsList[key]"
v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
...
</b-form-group>
optionsList is a keyed object containing lists of all the select elements on the form. optionsList is created by watching the "schema" object. The Rest API code is:
var idx = key;
Rest('GET', '/table/' + schema[key].table, requestParams,
this.$root.user.token)
.then(response => {
var localOptionsList = [];
response.data.forEach(function(row) {
var obj = { value: row[schema[idx].listColumns],
text: row[schema[idx].listColumns] };
localOptionsList.push(obj);
});
Vue.set(me.optionsList, idx, localOptionsList);
})
.catch(error =>
...
As mentioned, the code works fine, apart from the FIRST time the Vue is rendered.
This is obviously because the data has not yet been returned from the Rest API, so my problem is how to get the Vue to react when the data arrives?
Can anyone help?

Bind options value to ng-model in angularjs

I'm working on a project, and I need to bind the options value to object key's in such a manner that, on selecting an option, it gives 1, else other variables remain 0.
My HTML Code:-
<select required class="custom-select">
<option disabled>Select an option</option>
<option ng-model="PredictCtrl.detail.building_type_AP">Apartment</option>
<option ng-model="PredictCtrl.detail.building_type_GC">Independent House / Villa</option>
<option ng-model="PredictCtrl.detail.building_type_IF">Independent Floor / Builder's Floor</option>
<option ng-model="PredictCtrl.detail.building_type_IH">Gated Community Villa</option>
</select>
Variable to bind -
PredictCtrl.detail = {
building_type_AP: 0,
building_type_GC: 0,
building_type_IF: 0,
building_type_IH: 0
}
Generally, binding is done with select tag, which gives the value of the selected option, but I want in such a way that, when I click on Apartment option, it's bind variable PredictCtrl.detail.building_type_AP becomes 1, rest remains 0. Similarly, it does with other options.
I want to send the data as the same format through API.
So, please Help me out.
Sorry If I was not very clear with explaining or for any typo.
Thank you in advance.
You should take a look at the NgOptions directive which is the "angularjs" way of working with the select-tag.
It sould be able to fulfill your requirement as you will get the selected option in the SelectedOption object.
Here's an example
angular.module("app",[]).controller("myCtrl",function($scope){
$scope.details =
[
{name:"Apartment", value:1},
{name:"Independent House / Villa", value:2},
{name:"Independent Floor / Builder's Floor", value:3},
{name:"Gated Community Villa", value:4}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<select required class="custom-select" ng-options="item as item.name for item in details" ng-model="selectedOption">
</select>
<p>SelectedOption: {{selectedOption}}</p>
</div>
None of the answers at my time of writing actually present a functioning solution, so here's one.
Don't scatter ng-model directives across different option elements, it's unnecessary.
You can achieve what you want by using ng-options to enumerate all your choices, a single ng-model to keep track of the selected option, and ng-change to apply the values as you described (i.e. 1 on the selected key, 0 for everything else).
I've assumed you've got a requirement to keep the structure of detail as is. If it can be changed, then I'd recommend associating each labels with each it's respective building_type_ to keep things together.
See below.
angular
.module('app', [])
.controller('PredictCtrl', function () {
this.selectedDetail = null;
this.detail = {
building_type_AP: 0,
building_type_GC: 0,
building_type_IF: 0,
building_type_IH: 0,
};
this.labels = {
building_type_AP: 'Apartment',
building_type_GC: 'Independent House / Villa',
building_type_IF: 'Independent Floor / Builder\'s Floor',
building_type_IH: 'Gated Community Villa',
};
this.changeDetail = function () {
for (var key in this.detail) {
this.detail[key] = +(this.selectedDetail === key);
}
};
});
<script src="https://unpkg.com/angular#1.7.4/angular.min.js"></script>
<div ng-app="app" ng-controller="PredictCtrl as PredictCtrl">
<select
ng-model="PredictCtrl.selectedDetail"
ng-options="key as PredictCtrl.labels[key] for (key, value) in PredictCtrl.detail"
ng-change="PredictCtrl.changeDetail()"></select>
<pre>{{ PredictCtrl.detail | json }}</pre>
</div>
try like this:
in your controller:
$scope.details = [
{
name: "building_type_AP",
value: "Apartment",
state: false
},{
name: "building_type_GC",
value: "Independent House / Villa",
state: false
}/*add more here*/
];
$scope.setActive = function(detail){
detail.state = !detail.state;
}
in html template:
<select required class="custom-select">
<option disabled>Select an option</option>
<option ng-repeat="detail in details" ng-click="setActive(detail)">{{detail.value}}</option>
</select>
in the end just go through $scope.details and parse false to 0 and true to 1 OR just do this inside setActive function

handlebars with two different sets of properties. helper or partial?

I have a json object, let's call it teamData with Teams.
I want to be able to pass a variable such as Primary or Secondary to a call and have it render a states dropdown with the State of the TeamType selected.
I've been reading many handlebars tutorials but none of them really deal with more than one property of an object or show how to link a value from one property to another.
the states dropdown is simple
<script type="text/x-handlebars-template" id="tmpl-states">
<select>
{{#eachProperty States}}
<option name="{{property}}">{{value}}</option>
{{/eachProperty}}
</select>
</script>
Handlebars.registerHelper('eachProperty', function (context, options) {
var ret = "";
for (var prop in context) {
ret = ret + options.fn({ property: prop, value: context[prop] });
}
return ret;
});
but what I want to do is more like (in sudo)
renderTemplate("tmps-all", "container", "data", "variable");
<script type="text/x-handlebars-template" id="tmps-all">
{{#each Teams}}
{{#if TeamType == variable}} // e.g. Primary
var State = this.State;
{{/if}}
{{/each}}
<select>
{{#eachProperty States}}
{{#if property == State}} // e.g NY
<option name="{{property}}" selected>{{value}}</option>
{{/else}}
<option name="{{property}}">{{value}}</option>
{{/if}}
{{/eachProperty}}
</select>
</script>
var teamData = {"Teams":[{"TeamType":"Primary","State":"NY"},{"TeamType":"Secondary","State":"CA"}],"States":{"AK":"Alaska","AL":"Alabama","AR":"Arkansas","AZ":"Arizona","CA":"California","CO":"Colorado","CT":"Connecticut","DC":"District of Columbia","DE":"Delaware","FL":"Florida","GA":"Georgia","HI":"Hawaii","IA":"Iowa","ID":"Idaho","IL":"Illinois","IN":"Indiana","KS":"Kansas","KY":"Kentucky","LA":"Louisiana","MA":"Massachusetts","MD":"Maryland","ME":"Maine","MI":"Michigan","MN":"Minnesota","MO":"Missouri","MS":"Mississippi","MT":"Montana","NC":"North Carolina","ND":"North Dakota","NE":"Nebraska","NH":"New Hampshire","NJ":"New Jersey","NM":"New Mexico","NV":"Nevada","NY":"New York","OH":"Ohio","OK":"Oklahoma","OR":"Oregon","PA":"Pennsylvania","PR":"Puerto Rico","RI":"Rhode Island","SC":"South Carolina","SD":"South Dakota","TN":"Tennessee","TX":"Texas","UT":"Utah","VA":"Virginia","VT":"Vermont","WA":"Washington","WI":"Wisconsin","WV":"West Virginia","WY":"Wyoming"}};
There is no need for your eachProperty helper. The functionality it is giving you exists already in Handlebars. Let's remove that helper and update our template to the following (Note: I will replace the name attribute with value):
<select>
{{#each States}}
<option value="{{#key}}">{{this}}</option>
{{/each}}
</select>
Now on to the task of setting the selected attributed.
You are trying too much logic into your template. It is not for the template to initialize variables. That work should be done before the template is rendered. We want our code the calls the template method to give the template all the data it needs. This would mean passing to our template a data structure like this:
[
{
value: 'AK',
label: 'Alaska',
selected: false
},
{
value: 'AL',
label: 'Alabama',
selected: false
},
// and so on...
]
Our code will do the work of building this data structure:
var selected_team = teamData.Teams.find(team => team.TeamType === 'Primary');
var states = Object.keys(teamData.States).map(key => ({
value: key,
label: teamData.States[key],
selected: (key === selected_team.State)
}));
Now we can modify our template to handle our new data structure:
<select>
{{#each this}}
<option value="{{value}}" {{#if selected}}selected{{/if}}>{{label}}</option>
{{/each}}
</select>
When we call our template, we simply pass in our states variable:
renderTemplate(states);
However:
With all of that work behind us, I want to add that I see no purpose in re-rendering this template just to reflect a changed selected option. It makes more sense to me to use the DOM to make the change. Something like the following would suffice:
document.querySelector('#Select [value="NY"]').selected = true;
See: https://stackoverflow.com/a/7373115/3397771

angularjs JSON object filter select option

I'm having trouble with filtering JSON entries by defined categories with a select option element. Any help is much appreciated.
What my App should do:
Load JSON data from file by http.get (working)
The JSON data contains a job title and a job category (and other data) for each entry
Read each of these entries from JSON into a list-tag on html (working)
filter this list by a job category by a select option element (not working)
I guess the problem lies somewhere in my controller function. But I'm quite new to angularjs so I couldn't find out what the problem is... Any help is much appreciated.
first two entries of my JSON file with the tag "categories" in it:
[{
"jobtitle":"Multimedia Producer",
"name":"A. Text",
"shortname":"atext",
"shortdescription":"Werbeagentur",
"team":"XXX",
"lookingfor":"XXX",
"jobdescription":"XXX",
"portfolio":"XXX",
"contact":"XXX" ,
"categories":"none"
},
{
"jobtitle":"Kameraassistent",
"name":"Movie & Art",
"shortname":"movie_art",
"shortdescription":"Corporate Movies and more...",
"team":"XXX",
"lookingfor":"XXX",
"jobdescription":"XXX",
"portfolio":"XXX",
"contact":"XXX",
"categories":"photography"
}]
The controller.js:
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function ($scope, $http){
$http.get('js/data.json').success(function(data){
$scope.jobs = data;
$scope.catchange = 'categories'
});
}]);
Part of the HTML-page setup with the select option element:
<div ng-controller="MyController">
<span class="input">
<select ng-model="catchange" class="cs-select cs-skin-underline">
<option value="none">Suche nach Kategorien</option>
<option value="photography">Fotografie</option>
<option value="text">Text</option>
<option value="digital">Digital</option>
<option value="print">Print</option>
<option value="consulting">Beratung</option>
<option value="advertising">Werbung</option>
<option value="socialmedia">Social Media</option>
<option value="strategy">Strategie</option>
<option value="conception">Konzeption</option>
<option value="film">Film</option>
<option value="tv">TV</option>
</select>
</span>
</div>
<div class="searchlisting" ng-controller="MyController">
<ul class="portfolio-grid">
<li class="grid-item" ng-repeat="item in jobs | filter: catchange" data-jkit="[show:delay=300;speed=500;animation=fade]">
<img ng-src="img/searchlist/{{item.shortname}}_tn.jpg" alt="Photo of {{item.name}}">
<a class="ajax-link" href="single.html">
<div class="grid-hover">
<h1>{{item.jobtitle}}</h1>
<p>{{item.name}}</p>
</div>
</a>
</li>
</ul>
</div>
Many thanks for any help.
Cheers
catchange will be a string, and when you filter, you are iterating over each object that is a job. So really, you need to be comparing each job.categories against catchange model.
Therefore, when you are doing filter:catchange, you are comparing each job object against the selected string in catchange, where you need to be comparing job.categories to catchange. You can tell angular what to track an iterator by to make sure it is comparing, or you can do the following:
Write a filter function that returns a boolean. This is just one way
this will be the filter in the view, angular passes each job as a param
filter: filterCategory
This will be a function in your controller that needs to compare the incoming job category with the categories that need to be filtered out. Just have it return a boolean.
$scope.filterCategory = function(job){
return $scope.catchange.filter(category){
job.categories === category
}
}
edit: Above assumes multi-select options, where catchange is an array of selected options stored via string. If it only ever going to be a single category select then
$scope.filterCategory = function(job){
if($scope.catchange){
return job.categories === $scope.catchange
}
else {
return true
}
}
Try specifying the property name that you want filter:
<li class="grid-item" ng-repeat="item in jobs | filter: {categories: catchange}" data-jkit="[show:delay=300;speed=500;animation=fade]">

Simple Dropdownbox Select in meteor helpers

I'm creating a simple dropdownbox using select tag and templates as shown below:
<template name="serviceTypes">
<select id="servicetypes">
{{#each serviceNames}}
<option>{{name}}</option>
{{/each}}
</select>
and in .js file
Template.serviceTypes.helper({
serviceNames : function () {
var names = [{name: Yoga}, {name: Dance}];
return names;
}
});
But still the dropdown seems to be empty.
{{still a newbie in meteor}}

Categories

Resources