Filtering in angularJS by arrays atributtes - javascript

I'm building a web app and I'm using AngularJS for the front-end.
I have a problem when I try to filter some selects.
This is my case:
I have an object called 'Games'. It represents football games.
Games have two atributtes: id as an identifier and Team.
Team is a 'Teams' array. Now I will explain how is each Team.
A team has three attributes: id, name and League, all of them represent a League.
A League has two attributes: id and name.
I want to fill a select with Games and I want to filter this select by League. The problem is that the League is into each Team and when I try to do a filter like this: filter:{Team[0].League.id : 1} it is not working and I don't know why.
I have made an example on fiddle:
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select ng-model="newGame" ng-options="game.Team[0].name + ' vs ' + game.Team[1].name for game in Games | filter:{Team[0].League.Name : 'League spain'}"></select>
<select ng-model="teamsNewGame" ng-options="team.name for team in Teams | filter:{}"></select>
</fieldset>
function TodoCtrl($scope) {
$scope.LeagueSpain = { id: 1,
name: 'League spain'};
$scope.LeagueUK = { id: 2,
name: 'League UK'};
$scope.TeamBarcelona = {id:1,
name: 'Barcelona',
League: LeagueSpain};
$scope.TeamMadrid = {id:2,
name:'Madrid',
League: LeagueSpain};
$scope.TeamChelsea = {id:3,
name:'Chelsea',
League: LeagueUK};
$scope.TeamArsenal = {id:4,
name:'Arsenal',
League: LeagueUK};
$scope.Teams = [TeamBarcelona, TeamMadrid, TeamChelsea,
TeamArsenal];
$scope.Games = [{id: 1,
Team:[TeamBarcelona,
TeamMadrid]
},
{id: 2,
Team:[TeamChelsea,
TeamArsenal] }
];
}
http://jsfiddle.net/vqzj37ys/1/
Edit: the second filter is empty because I don't know how to filter teams that are in the game.Team array

Related

Using ng-options with JSON data

I'm still trying to find my way with AngularJS. I have a JavaScript code that uses URL to return JSON data as an array. I need help with populating the same data in select using ng-options.
data to populate on the select
This isn't how you ask for help, but nevermind. Given a JSON object like this
var JsonArray = [{
id: 1,
name: 'Jane',
address: 'Jane\'s house'
}, {
id: 2,
name: 'Jill',
address: 'Jill\'s house'
}, {
id: 3,
name: 'John',
address: 'John\'s house'
}, {
id: 4,
name: 'Jack',
address: 'Jack\'s house'
}];
When you want to use ng-select with ng-options, you need to specify 3 required fields :
your table
the name that every object will take (like a for ... each loop)
The property you want to see in your options
You also can specify a track by property to give your options a given value.
<select ng-model="mySelect" ng-options="object.name for object in JsonArray track by object.id"></select>
Now, use the last piece of code, and inspect it in a brwoser. You will understand everything.
For reference :
<select ng-model="mySelect" ng-options="[object].[chosenProperty] for [object] in [yourArray] track by [object].[property]"></select>

How Do I Structure Multiple Select Options Over an Array of Objects in Angular

I have an super big array similar to this:
$scope.providers = [{
providerName: 'John Doe',
colors: 1,
itemQuantity: 100,
item: 'pen',
price: 2,5
},
{
providerName: 'John Doe',
colors: 1,
itemQuantity: 200,
item: 'pen',
price: 2
},
providerName: 'John Doe',
colors: 3,
itemQuantity: 400,
item: 'clock',
price: 10
},
providerName: 'Jane Doe',
colors: 1,
itemQuantity: 50,
item: 'bag',
price: 15
}]
Im building a proposal maker, so I need our business employees to select which provider option they'll be using. (For you to understand these providers just put a logo on our items, and that array of objects is really a list of the prices they charge by quantity of colors, type of item and quantity of items)
The thing is, I want to create a select input with options to first choose which provider we will be using, let's say we settle with John Doe. Then I want a select input to choose the quantity of colors, but will only offer those that John Doe offers. Then I need another input which will let me choose the type of items that John Doe works for that quantity of colors... and so on
Finally I'd like to get the price for all that options
I'm getting quite lost on how to build this on angularjs (version 1.5.8)
Also something tells me I should order my data in a better way than that huge array.
Any suggestion on both issues?
Thanks!
Basically you set it up to have the comboboxes be based off the previous ones (excuse the silly html, it was for demo purposes):
Working Plnkr
<body ng-controller="MainCtrl">
Provider:
<select ng-model="selectedProvider" ng-options="p.providerName as p.providerName for p in providers | unique:'providerName'">{{p}} </select>
<br/>
Selected Provider: {{selectedProvider}}
<br/>
<br/>
Number of Colors:
<select ng-model="selectedNumber" ng-options="n.colors as n.colors for n in providers | filter : {providerName:selectedProvider } | unique:'colors' "> </select>
<br/>
Selected Number: {{selectedNumber}}
<br/>
<br/>
Items:
<select ng-model="selectedItem" ng-options="i.item as i.item for i in providers | unique:'item' | filter : {providerName:selectedProvider, colors: selectedNumber}"> </select>
<br/>
Selected Item: {{selectedItem}}
<br/>
Distinct Prices:
<div ng-repeat="p in providers | filter : {providerName:selectedProvider, colors: selectedNumber, item: selectedItem}">
<span>{{p.price}}</span>
</div>
You'll have to make sure you include 'angular.filter' dependency and the .js file at the top of the plnkr. You may also have to make sure the filtering matches whole words, and not just parts, but this should be more than enough to get you started.

AngularJS: Using ng-selected to select multiple options, based on collection

I have two arrays of objects, one array being a subset of the other:
$scope.taskGroups = [
{id: 1, name: 'group1', description: 'description1'},
{id: 2, name: 'group2', description: 'description2'},
{id: 3, name: 'group3', description: 'description3'}
];
$scope.selectedGroups = [
{id: 1, name: 'group1', description: 'description1'},
{id: 2, name: 'group3', description: 'description3'}
];
After unsuccessfully trying to get my head around using ng-option, I thought that I could perhaps create a function to determine if an option should be selected in the select list, based on what I picked up in the documentation:
ngSelected
- directive in module ng Sets the selected attribute on the element, if the expression inside ngSelected is truthy.
So, I came up with this function:
$scope.inSelectedGroups = function(taskGroup) {
angular.forEach($scope.selectedGroups, function(group) {
if (taskGroup.id == group.id) {
return true;
}
return false;
});
};
and tried to use it in this html:
<select multiple ng-model="selectedGroups" style="width: 100%" size="7">
<option ng-repeat="taskGroup in taskGroups" value="{{taskGroup.id}}" ng-selected="inSelectedGroups(taskGroup)">{{taskGroup.name}}</option>
</select>
but, no dice - the full list of taskGroups shows, but the selectedTaskGroups aren't, well, selected...
Am I barking up the wrong tree here?
the full list of taskGroups shows, but the selectedTaskGroups aren't,
well, selected.
I tried your solution which is using the ngSelected attribute but I was unsuccessful as well so I tried using the ngOptions instead and it works.
angular.module('app', []).controller('TestController', ['$scope',
function($scope) {
$scope.taskGroups = [{
id: 1,
name: 'group1',
description: 'description1'
}, {
id: 2,
name: 'group2',
description: 'description2'
}, {
id: 3,
name: 'group3',
description: 'description3'
}];
$scope.selectedGroups = [{
id: 1,
name: 'group1',
description: 'description1'
}, {
id: 2,
name: 'group3',
description: 'description3'
}];
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="TestController">
<select multiple="true" ng-model="selectedGroups" style="width: 100%" ng-options="taskGroup.id as taskGroup.description for taskGroup in taskGroups track by taskGroup.id" size="7">
</select>
</div>
See carefully, you are returning Boolean value from function defined in angular.forEach parameter and so nothing is returned from inSelectedGroups function
Try modifying your function to:
$scope.inSelectedGroups = function(taskGroup) {
var flag = false;
angular.forEach($scope.selectedGroups, function(group) {
if (taskGroup.id == group.id) {
flag = true;
return;
}
flag = false;
return;
});
return flag;
};

Handlebars JS (or EJS) templating: Divide list into categories

I want to create an unordered list based on an array of objects using Handlebars JS.
The objects take the following form:
{ name: 'NameOne', id: 001, category: 2 }, { name: 'NameTwo', id: 002, category: 1 }, { name: 'Name Three', id: 003, category: 1 }, { name: 'Name Four', id: 004, category: 3 }...
At the moment I have a template with an each function which compiles an UL with each object making a new list item, as so:
{{#each this}}
<li>{{ name }}</li>
{{/each}}
What I would like to do is find the simplest way to divide the list depending on categories, so I could end up with something like this...
Category 1
NameTwo
NameThree
Category 2
Name One
Category 3
Name Four
If I can do this only with the template, that would be perfect, but I can also change the JS which compiles the template if needed. I would also be open for using EJS templates if that is a better solution. I have thought of a couple of solutions, but all seem very over-complicated and don't work very well, but surely this can be quite a common problem and there must be good solutions.
Many thanks.
Hi when I'm solving problems like this, I tend to manipulate the data though JavaScript to keep the template clean.
How about trying something like this:
HTML
{{#each list}}
<ul>
<li>
Category {{#key}}
<ul>
{{#each this}}
<li>{{name}}</li>
{{/each}}
</ul>
</li>
</ul>
{{/each}}
JS
var rawData = [
{ name: 'NameOne', id: 001, category: 2 },
{ name: 'NameTwo', id: 002, category: 1 },
{ name: 'Name Three', id: 003, category: 1 },
{ name: 'Name Four', id: 004, category: 3 }
];
var data = {
list:{
}
};
for (var i = 0; i < rawData.length ; i++) {
var a = rawData[i];
var cat = a.category;
if(typeof data['list'][cat] === 'undefined'){
data['list'][cat] = [];
}
data['list'][cat].push(a);
}
Also here is a jsfiddle

Angular chosen is not binding Array of Objects

I'm using angular chosen plugin for selecting an attribute on any select element.
My data is in this format:
$scope.pets = [
{
id: '1',
name: 'Dog',
desc:"Something"
},
{
id: '2',
name: 'Cat',
desc:"Something"
},
{
id: '3',
name: 'Rat',
desc:"Something"
}
];
And the angular choosen implementation for displaying the name using ng-options is:
<select multiple ng-model="myPets" ng-options="r as r.name for r in pets" chosen>
I'm able to get the drop down using ng-options for the above data like this,
But how can I bind the default values into the angular choosen input box if my ng model is bind to the following object:
$scope.myPets= {
id: '6',
name: 'Pig',
desc:"Something"
},
You can set the default values in the controller by using
$scope.myPets= [$scope.pets[0], $scope.pets[5]];
Compared to what you were thinking you need to use an array [] because you are using select multiple. You also have to directly refer to the existing objects or angular/javascript won't recognize the connection.

Categories