Firebase Ionic Nested Search - angularjs

I'm trying to make a search function.
When a user selects a product, a list of products should be shown belonging to some storage place.
For so far, I can only show the array Products with all the items in it. But when I want to go deeper and loop over each items (to search items that match with the selected item), I got an error:
Error: No index defined for Products
This is my code:
controllers.js:
.controller('InventoryCtrl', function($scope, Category, Inventory) {
$scope.categories = Category;
$scope.searchInventory = function(category){
var word = category.Category;
//console.log(word);
var ref = new Firebase('https://vivid-heat-2430.firebaseio.com/');
var invenRef = ref.child('Inventories');
var prodRef = invenRef.child('Products');
invenRef.orderByChild("Products").on("child_added", function(snapshot) {
var data = snapshot.val();
var store = data.Inventory;
var prod = data.Products;
console.log(prod);
snapshot.forEach(function(childSnapshot) {
var test = childSnapshot.val();
console.log(test);
//var key = childSnapshot.key();
//console.log(key);
});
});
};
})
I’ve already defined my index. But I still got this error.
I also tried it like this in my controller:
$scope.searchInventory = function(category){
var word = category.Category;
var ref = new Firebase('https://vivid-heat-2430.firebaseio.com/');
var invenRef = ref.child('Inventories');
var prodRef = invenRef.child('Products');
invenRef.orderByChild("Products").equalTo(word).on("child_added", function(snapshot){
console.log(snapshot.key());
});
};
})
Here I got no errors, But I can't log anything to see.
This is my firebase structure:
Database structure
Can you please point out what I did wrong? I'm still new to this and trying to learn from my mistakes.
Thanks in advance!
EDIT
My rules.json
{
"rules": {
".read": true,
".write": true,
"Inventories": {
".indexOn": "Products"
}
}
}
JSON file of db structure:
{
"Categorie" : {
"-K5a3iGlgi7PS0m3O4y8" : {
"Category" : "IQ 33cl BOX",
"Optional" : false,
"Size" : "24"
},
"-K5a3vNZRc2Cur9964Xs" : {
"Category" : "CL 33cl BOX",
"Optional" : true,
"Size" : "24"
},
"-K5a40Q79SCqWqMbqWQu" : {
"Category" : "IQ 33cl CASE",
"Optional" : true,
"Size" : "24"
},
"-K5a464FON4qdnqE9rgf" : {
"Category" : "CL 33cl CASE",
"Optional" : false,
"Size" : "24"
},
"-K5a4TAzHE8cRGPbNeij" : {
"Category" : "Empty CASES",
"Optional" : false,
"Size" : "24"
}
},
"Inventories" : {
"17-12-2015Storage 1" : {
"Date" : 1450366396979,
"Inventory" : "Storage 1",
"Products" : {
"CL 33cl BOX" : {
"boxes" : 0,
"full" : 11,
"half" : 13
},
"IQ 33cl BOX" : {
"boxes" : 0,
"full" : 60,
"half" : 0
}
}
},
"17-12-2015Storage Deb" : {
"Date" : 1450367128198,
"Inventory" : "Storage Deb",
"Products" : {
"IQ 33cl CASE" : {
"boxes" : 0,
"full" : 2,
"half" : 14
}
}
}
},
"Storages" : {
"-K5a4esu-1Na1hkKMP47" : { "name" : "Storage 1" },
"-K5a4ihb9L5z6qSqQxAx" : { "name" : "Storage Deb" },
"-K5a4l9odWuPUJJuN8OR" : { "name" : "Storage Bart" },
"-K5a4nsc47N3k_hMVl2h" : { "name" : "Storage Debosz" }
}
}
index.html
<div style="max-height: 300px" ng-controller="InventoryCtrl">
<ion-list>
<ion-radio ng-repeat="category in categories" class="item-accordion" ng-model="checked.check" value="{{category.Category}}" ng-click="searchInventory(category)">
<p>{{category.Category}}</p>
</ion-radio>
<br>
</ion-list>
</div>

Your structure (according to the link)
Inventories
some_node_name_1
Inventory: xxxx
Products:
product_name: "product a"
product_price: 30
some_node_name_2
Inventory: xxxx
Products:
product_name: "product b"
product_price: 50
and your query path
var ref = new Firebase('https://vivid-heat-2430.firebaseio.com/');
var invenRef = ref.child('Inventories');
var prodRef = invenRef.child('Products');
(note prodRef doesn't appear to be used)
So how about:
var ref = new Firebase('https://vivid-heat-2430.firebaseio.com/Inventories');
ref.orderByChild("Products/product_name").on("child_added", function(snapshot) {
});
And the .indexOn rule should be at the same level as where you do the query (product_name).
Edit with more info:
A nodes key is indexed automatically so you don't need to add .index for the node Products (it's already done). However, you would add a index for a child of Products for example:
{
"rules": {
"Inventories": {
"Products": {
".indexOn": ["product_name"]
}
}
}
}
or (I believe this is another option)
{
"rules": {
"Inventories": {
".indexOn": ["Products/product_name"]
}
}
}

I've solved the problem by using Object.keys() to get the name of the products.
I also used a for loop to search for the matching product.
My controller looks like this now:
.controller('InventoryCtrl', function($scope, $firebaseObject, Category, Inventory) {
$scope.categories = Category;
$scope.searchInventory = function(category){
var word = category.Category;
var ref = new Firebase('https://vivid-heat-2430.firebaseio.com/');
var invenRef = ref.child('Inventories');
var prodRef = invenRef.child('Products');
var test22 = [];
invenRef.orderByChild("Products").on("child_added", function(snapshot) {
var data = snapshot.val();
var store = data.Inventory;
var test = Object.keys(prod);
for( var i = 0; i < test.length; i++){
if (test[i] == word) {
test22.push(data.Inventory);
};
};
$scope.show = test22;
});
};
})

Related

Mobile list collapsible items

I am trying to create a list of collapsible containers. The container should collapse and expand. I have created an example list item renderer.
qx.Class.define("mb.ui.list.QuotaWeekListRenderer",
{
extend : qx.ui.mobile.list.renderer.Default,
members :
{
__collapsible : null,
__weeksContainer : null,
_init : function()
{
this.ignoreBase;
this.__collapsible = this._createCollapsible();
this.add(this.__collapsible);
},
setTitle : function(title)
{
this.ignoreBase;
if (title && title.translate)
{
this.__collapsible.setTitle(title.translate());
}
else
{
this.__collapsible.setTitle(title);
}
},
addWeek : function(value)
{
var label = new qx.ui.mobile.basic.Label(value);
this.__collapsible.add(label);
},
_createCollapsible : function()
{
return new qx.ui.mobile.container.Collapsible();
},
// overridden
reset : function()
{
this.ignoreBase;
this.setTitle("");
this.__collapsible.getContent().removeAll();
}
}
});
var page = new qx.ui.mobile.page.NavigationPage();
page.setTitle("List");
page.addListener("initialize", function()
{
// List creation
var list = new qx.ui.mobile.list.List({
configureItem : function(item, data, row)
{
item.setTitle("Week " + parseInt(data.weekNo));
for (var i = 0, l = data.weekDates.length; i < l; i++)
{
item.addWeek(data.weekDates[i]);
}
},
createItemRenderer : function()
{
return new mb.ui.list.QuotaWeekListRenderer();
}
});
// Create the data
var data = [{title: "title1", weekNo: 1, weekDates : ["1/2/2014", "2/2/2014"]},
{title: "title2", weekNo : 2, weekDates : ["2/3/2015", "9/3/2015"]}];
list.setModel(new qx.data.Array(data));
page.getContent().add(list);
},this);
this.getManager().addDetail(page);
page.show();
The above can be run in Playground
My problem is that the items don't expand on 'tap'. Listener toggles the "collapsed" property of the container, but it has no effect on the DOM element. Any ideas how to fix it?
something like this, maybe?
Playground example

AngularJS filter already selected option from dynamic field

I have a form where you can add x number of fields. Each field contains option select. I want to filter out the already chosen option when this option is already chosen in one or multiples field before. Each field has a remove button and the form has 1 add button.
How can I filter out the dynamic fields?
Any help,guidance is most welcome.Thanks in advance. :)
This is how my HTML looks like:
<div data-ng-repeat="choice in choices">
<select data-ng-model="choice.option"
data-ng-options="item as item.Value for item in options">
</select>
<button data-ng-click="removeChoice(choice)">Remove choice</button>
<div>
<button data-ng-show="choices.length <= 4" data-ng-click="addNewChoice()">Add Choice</button>
</div>
</div>
And my controller:
$scope.options = [
{
"Key": "0",
"Value": "Select an option"
},
{
"Key": "Option1",
"Value": "Option1"
},
{
"Key": "Option2",
"Value": "Option2"
},
{
"Key": "Option3",
"Value": "Option3"
},
{
"Key": "Option4",
"Value": "Option4"
},
{
"Key": "Option5",
"Value": "Option5"
}
];
$scope.choices = [{ id: '1' }];
$scope.addNewChoice = function () {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({ id: newItemNo, option: $scope.option, value: $scope.value });
};
$scope.removeChoice = function () {
var index = $scope.choices.indexOf(choice);
$scope.choices.splice(index, 1);
};
ok
i can give simple recommendation which will be this.
1: add variable $scope.selectedOptions = [];
this will contain list of already selected options from all select elements .
2: create function $scope.AddSelectedOption(item);
this will add the selected object when we change option from any select element because we are going to use for all selects ng-change= "AddSelectedOption(item);"
3: add checkIfSelected(item); this will check if given object value is already selected or not ..
will user in
hope you understand what it will do just check like this
$scope.checkIfSelected = function (item) {
$scope.selectedFound = $scope.selectedOptions.filter(function
(option) {
if(option.value == item.value)
{
return day;
}
});
if($scope.selectedFound.length == 0 ) { return false; } else {
return true; }
}
This will return true if give item found in the options.
if not out.. you can invite me to help again .
This is possible. I'm explaining a basic version of this requirement. See the working example here http://plnkr.co/edit/S9yZpjhY55lXsuifnUAc?p=preview
What wer are doing is maintaining another options which is the copy of the original options. Copying the options will make it to not reference existing options since objects are pass by reference in Javascript.
The main logic is in this function, which modify the options on selection:
$scope.optionSelected = function(choice) {
$scope.availableOptions = $scope.availableOptions || angular.copy($scope.options);
if (choice.option) {
var index = -1;
// See if available options has that key
angular.forEach($scope.availableOptions, function(item, i) {
if (item.Key === choice.option.Key) {
index = i;
}
});
if (index > -1) {
// And then remove it
$scope.availableOptions.splice(index, 1);
}
}
};

Handling relationships in meteor-angular

coming from a heavy MySQL and PHP background I can't really get my head over this.
I have a collection of branches with a ManyToOne relation to Restaurants (so there are many branches attached to the same restaurant).
Such relation is defined by the field restaurantId, which stores the id of the object. My branches collection appears as follows:
{
"_id" : "uH4KbNYxw8cnCEqvk",
"address" : "1 High Street",
"loc" : {
"coordinates" : [
0.0,
0.0
],
"type" : "Point"
},
"restaurantId" : "dvxZ2NiA3gbevffsk"
}
And of course the restaurants collection
{
"_id" : "dvxZ2NiA3gbevffsk",
"name" : "Restaurant name"
}
Now, I'm querying all the branches ordered by proximity using $near, and I can't find a clean way to get the name of the parent restaurants while looping over the branches.
Here is what I did - I mean, it works as it is, but I think performance-wise it has a lot to be improved
// controller
angular.module("MyApp").controller("SearchRestaurantsCtrl",
function($scope, $stateParams, $meteor){
$meteor.subscribe('branches');
$meteor.subscribe('restaurants');
$scope.branches = $meteor.collection(function() {
return Branches.find({
loc: {
$near: {
$geometry: {
type: "Point",
coordinates: [ $stateParams.lng, $stateParams.lat]
},
$maxDistance: 300000
}
}
});
});
$scope.getRestaurant = function(restaurantId) {
return Restaurants.findOne({
_id: restaurantId
});
};
}
);
// view
<div ng-repeat="branch in branches">
<h3>{{getRestaurant(branch.restaurantId).name}}</h3>
<address>{{branch.address}}</address>
</div>
I ended up using passing both the collection and filtering using angular:
Controller
angular.module("sushisushi24").controller("SearchRestaurantsCtrl",
function($scope, $stateParams, $meteor){
$scope.branches = $meteor.collection(Branches).subscribe('branchesAndRestaurants');
$scope.restaurants = $meteor.collection(Restaurants);
}
);
Meteor Publish
Meteor.publish('branchesAndRestaurants', function(opts) {
branches = Branches.find();
restaurantIds = branches.map(function(branch) { return branch.restaurantId });
return [
branches,
Restaurants.find({_id: {$in: restaurantIds}})
];
});
View
<div ng-repeat="branch in branches">
<div ng-repeat="restaurant in restaurants | filter: {_id:branch.restaurantId}">
<h3>{{restaurant.name}}</h3>
</div>
<address>{{branch.address}}</address>
</div>

how can I add groups under an active/inactive child?

I have successfully been able to send data to the firebase server however I am having trouble getting the data to send to the appropriate data subset I have created. When I send data made in the html form, It sends organized by ID number. I need it to be sent as a child to the 'groups' category in firebase.
here is a Plnkr with the server and $add working. Any suggestions I would really appreciate!
http://plnkr.co/edit/LZ24sRoSJjuCHQnEGzQz?p=linter
.controller('MainCtrl', ['$scope', 'groupsService', function( $scope, groupsService, $firebase ) {
$scope.newGroup = {
name: '',
status: ''
};
$scope.addGroup = function(newGroup) {
groupsService.addGroup(newGroup);
$scope.newGroup = {
name: '',
status: ''
};
};
$scope.updateGroup = function (id) {
groupsService.updateGroup(id);
};
$scope.removeGroup = function(id) {
groupsService.removeGroup(id);
};
}])
.factory('groupsService', ['$firebase', 'FIREBASE_URI',
function ($firebase, FIREBASE_URI) {
var ref = new Firebase(FIREBASE_URI);
var groups = $firebase(ref).$asArray();
var getGroups = function(){
return groups;
};
var addGroup = function (newGroup) {
console.log(newGroup)
groups.$add(newGroup);
};
var updateGroup = function (id){
groups.$save(id);
};
var removeGroup = function (id) {
groups.$remove(id);
};
return {
getGroups: getGroups,
addGroup: addGroup,
updateGroup: updateGroup,
removeGroup: removeGroup,
}
}]);
Thanks for responding! What I am trying to do is add dummy data (name and status) to the groups category like this:
{
Groups:[
"-JcFXid1A2G8EM7A_kwc" : {
"name" : "hi",
"status": "inactive"
},
"-JcFZP5FNtL4Yj6nja_7" : {
"name" : "hi"
"status": "inactive"
},
"-JcFtGoZL7J-CCIjTYcL" : {
"name" : "dfgdfg",
"status": "inactive"
}
]
}
would it make more sense to have them organized by active or inactive? I am afraid to nest too far in firebase...
like
{
Groups:[
"Active":[
"-JcFXid1A2G8EM7A_kwc" : {
"name" : "hi",
}
],
"Inactive":[
"-JcFZP5FNtL4Yj6nja_7" : {
"name" : "hi"
},
"-JcFtGoZL7J-CCIjTYcL" : {
"name" : "dfgdfg"
}
]
]
}
This isn't an answer to your question yet, because I first need to understand what you're trying to accomplish (and I can't fit this amount of information in a comment).
In your view you have a form that binds to the group's name and status:
<form role="form" ng-controller="MainCtrl" ng-submit="addGroup(newGroup)">
<div class="form-group">
<label for="groupName">Group Name</label>
<input type="text" class="form-control" id="groupName" ng-model="newGroup.name">
</div>
<div class="form-group">
<label for="groupStatus">Group Status</label>
<select class="form-control" ng-model="newGroup.status">
<option value="inactive">Inactive</option>
<option value="active">Active</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
In your GroupsService you essentially add a group like this:
var ref = new Firebase(FIREBASE_URI);
var groups = $firebase(ref).$asArray();
groups.$add(newGroup);
Which adds the group to the collection at that URL.
Which leads to this data structure:
{
"-JcFXid1A2G8EM7A_kwc" : {
"name" : "hi",
"status" : "inactive"
},
"-JcFZP5FNtL4Yj6nja_7" : {
"name" : "hi",
"status" : "active"
},
"-JcFtGoZL7J-CCIjTYcL" : {
"name" : "dfgdfg",
"status" : "active"
}
}
But if I understand you correctly you to want the data to be stored like this:
{
"inactive": [
"-JcFXid1A2G8EM7A_kwc" : {
"name" : "hi"
}
],
"active": [
"-JcFZP5FNtL4Yj6nja_7" : {
"name" : "hi"
},
"-JcFtGoZL7J-CCIjTYcL" : {
"name" : "dfgdfg",
}
]
}
Is this indeed what you're looking to do?
Are you ever going to display active and inactive groups combined in a list? This is important to know, since it is quite easy to filter a list in Angular, but I wouldn't know how to merge two lists.

AngularJS - Filter empty objects

I have a $scope.myData object that contain a chunk of data. What i am trying to do is display the data but filter out the nulls and empty strings:
$scope.myData = [
{
"ID" : "001",
"Message" : "test test test test"
},
{
"ID" : "002",
"Message" : "test test test test"
},
{
"ID" : "003",
"Message" : "test test test test"
},
{
"ID" : "004",
"Message" : "test test test test"
},
{
"ID" : "005",
"Message" : " "
},
{
"ID" : "006",
"Message" : "test test test test"
},
{
"ID" : "007",
"Message" : "test test test test"
},
{
"ID" : "007",
"Message" : null
}
]
I can perform an ng-repeat on the above and filter null's via:
<div ng-repeat="data in myData | filter:{Message: '!!'}">
{{ data.ID }}
{{ data.Message }}
</div>
But how can i filter the empty strings e.g:
"Message" : " "
Thanks
We can simply use ng-if here:
<div ng-repeat="data in myData " ng-if="data.Message">
{{ data.ID }}
{{ data.Message }}
</div>
You can use a function instead of an object like this
<div ng-repeat="data in myData | filter:emptyOrNull">
{{ data.ID }}
{{ data.Message }}
</div>
And in the controller
$scope.emptyOrNull = function(item){
return !(item.Message === null || item.Message.trim().length === 0)
}
Well you can create a custom filter:
.filter('hasSomeValue', [function(){
return function(input, param) {
var ret = [];
if(!angular.isDefined(param)) param = true;
angular.forEach(input, function(v){
if(angular.isDefined(v.Message) && v.Message) {
v.Message = v.Message.replace(/^\s*/g, '');
ret.push(v);
}
});
return ret;
};
}])
And in your HTML:
<div ng-repeat="data in myData | hasSomeValue: data.Message">
DEMO
You can use '' charter.
Try check like this.
<div ng-repeat="data in myData | filter:{Message: ''}">
You can use an angular filter for this:
Working Fiddle
Code Snippet:
.filter('filterData',function(){
return function(data) {
var dataToBePushed = [];
data.forEach(function(resultData){
if(resultData.Message && resultData.Message != " ")
dataToBePushed.push(resultData);
});
return dataToBePushed;
}
});
If you wanted to filter out values in an object that are empty, you could create a custom filter and filter each based on the value.
Something like this:
.filter("notEmpty",
function () {
return function (object) {
var filteredObj = {};
angular.forEach(object, function (val, key) {
if (val != null) {
if (typeof(val) === "object") {
if (Object.keys(val).length > 0) {
filteredObj[key] = val;
}
} else if (typeof(val) === "string") {
if (val.trim() !== "") {
filteredObj[key] = val;
}
} else {
filteredObj[key] = val;
}
}
});
return filteredObj;
};
});
jsFiddle example
You could also use the ng-if directive and a function that parses the objects as you see fit.

Resources