Updating array items angularfire - javascript

I am using angularfire $add method to add basic js objects of the form {id:integer,name:name}
Now, if I want to update a particular item (which usually has a firebase-assigned key like "-JEcA_f70efHbKi5js7j" or something, my impression is that I should use the $save method.
Here is how I am trying to do this:
$scope.chosenColors = $firebase(myChosenColorsRef);
$scope.updateColor = function(data){ //data is a JS object like {id:'id',name:'name'}
if($scope.chosenColors.$getIndex().length>0){
var keys = $scope.chosenColors.$getIndex();
keys.forEach(function(key, i) {
if($scope.chosenColors[key].id!=data.id){//if id matches I want to update name
$scope.chosenColors[key] = {id:data.id,name:data.name}
$scope.chosenColors.$save[key];
return;
}
});
}else{
$scope.chosenColors.$add(data);
}
But this doesn't appear to have any effect on the firebase...any ideas what I am doing wrong?

Firstly, you should call the $save method instead of simply accessing it with a key:
$scope.chosenColors.$save(key);
Secondly, you're iterating over all the keys to figure out which one you want to save which is pretty inefficient. You should change your updateColor argument to take the key as an argument.
<div ng-repeat="(key, color) in chosenColors">
<a ng-click="updateColor(key, color)">Update</a>
...
</div>
function updateColor(key, data) {
$scope.chosenColors[key] = data;
$scope.chosenColors.$save(key);
}

Thanks for that. I will give it a go.. the reason I am iterating over all items is I am responding to a drag event on a canvas item, and I need to know which item it is that is being dragged...I suppose I could keep that as part of the dragged object and address it directly..baby steps!
Regards,

Related

How to implement a loop in a multi parameters filter in a ng-repeat?

I would like to make a loop in a filter parameters
Hey,
I'm doing a multi filters table. Each column as an input to add a string to filter on.
For each column, I call the parameter name with the filter input in the filter function :paramN: filter[n]
Is there a way to make a loop in it so I won't have to write every parameter one by one ?
I have everything I need in an array but I don't know how (if it's possible) to call it in the filter.
Should I use a custom filter ? If so, what would be the syntax, and, would it slow the process ?
Here the code of my filter :
<tr ng-repeat="folder in listFolders|
filter:{param1:filter[1],
param2:filter[2],
param3:filter[3],
...
paramN: filter[n]
} as listVisible
">
Here is my array :
$scope.parametres=[
{int:1, libelle:'name1', variable:'param1'},
{int:2, libelle:'name2', variable:'param2'},
{int:3, libelle:'name3', variable:'param3'},
...
{int:n, libelle:'nameN', variable:'paramN'}
]
Thanks !
In case someone someday face the same problem as me :
I made this function in my controller (it's called every time a change is made in the filters inputs via a ng-change)
$scope.filteringFunction = function(){
var filtered=angular.copy($scope.listFolders);
for(var i=0; i<$scope.parametres.length; i++){
if($scope.filter[$scope.parametres[i].int]!==''){
var filter =$rootScope.toNoCase($scope.filter[$scope.parametres[i].int]);
var param = $scope.parametres[i].variable;
filtered = filtered.filter(function (item) {
return $rootScope.toNoCase(item[param]).includes(filter);
});
}
}
$scope.listFoldersFiltered=filtered;
};
and I changed a bit the ng-repeat (basically remove the filter and change the list listFolders to listFoldersFiltered)
<tr ng-repeat="folder in listFoldersFiltered as listVisible">
If someone know an other method to do it, I'm all ears !

How to add new key/value pair element to an existing array?

var onHomePageLoaded = function(retMsg)
{
$scope.data = retMsg.data.records;
$scope.data.link : 'http://www.newwebsite.com'
}
After i have added link element (key/value) to the javascript object, i am not able to get the same in the HTML template
<div ng-repeat="record in data">
<a ng-href="{{record.link}}"> Click Here </a>
</div>
Javascript is a dynamic language. You can add properties to existing objects in a very simple way , like assigning a value to an existing property. Just add a new property
$scope.data.link = 'http://www.newwebsite.com'
if retMsg.data.records is an array, still you can add a property to $scope.data.
if you want different link for every object in array then, do this.
$scope.data.forEach(function(obj){
obj.link = "your custom link" // write your logic here to produce different link.
});
If data is an array you can use
$scope.data.push(yourData);
for example
$scope.data.push({link : 'http://www.newwebsite.com'});
Or if you want to access the objects inside the array and add them a key value pair you can do as follow:
// add the link to the first entry
$scope.data[0].link = 'http://www.newwebsite.com';
Sorry. Do not know if I understood well.
Maybe you can define scope.data as:
$scope.data = {retMsg.data.records}
Then for example a function:
$scope.addNew = funtion(){
$scope.data.newElement = $scope.viewElement
};
In your HTML
<label>{{data}}</label> // Which makes reference to the $scope.data at the controller
<input ng-change="addNew()" ng-model="viewElement"></input>
<label>{{data.newElement}} // Will be empty at the very beginning but will show the new element once it is created.
Hope it helps
I see several issues with your code.
First, you use the variable name record in your ng-repeat, but then use report in ng-href. I assume those should be the same.
Also, link isn't a member of record, it is a member of data. You set it as a member of data here: $scope.data.link : 'http://www.newwebsite.com'. If you want to add that link to each record, in your onHomePageLoaded function, you'll need to loop through all the records you add to data, and add the link property to each one.

DataSet Returned to JavaScript AngularJS

I need to know how to get an object by position with AngularJS, I return from WebAPI in C# a DataSet with 4 DataTable and save it in a $scope on my JS, when i do console.log($scope.data) in the Chrome Console see like the image. Now when i do console.log($scope.data[1]) in Chrome Console i get undefinided, but when i do console.log($scope.data.inputs0) i see the correct data. What is wrong? Thanks :)
There is no $scope.data[1]. It's not an array, it's an object. You can do a few things :
use a js library like "Underscore.js" and use _.findWhere($scope.data, {key : "someData"}); which will return the object at that key (this assumes you know the key name).
Loop through each set of inputs with an angular.ForEach. Ex:
angular.forEach($scope.data, function(item, key){
//Now something like $scope.data[0] is passed in essentially
});
If you don't know the name of it, you won't be able to get it. You could also remap your object $scope.data to something more descriptive or to keys of 0, 1, 2 etc. Having them listed as you do probably isn't the best way to handle this.
Finally i extract the key's names in an angular foreach and work with em.
angular.forEach($scope.dataInputs, function (value, key) {
var nombrePos = key.slice(-1); //key=inputs0 and nombrePos=0
...
});

AngularJS/JavaScript Remove specific element from Localstorage array

I have an array in my LocalStorage that I manipulate with ngStorage.
I am trying to remove items from there but when I use
$localStorage.someArrayName.splice(id, 1);
only the first removed item works fine, then removing stop working as I would like to.
I also tried something like this:
if (id === $localStorage.someArrayName.length) {
$localStorage.someArrayName.pop();
}
else if (id === 0) {
$localStorage.someArrayName.shift();
}
else {
$localStorage.someArrayName.splice(id, 1);
}
But I get even more buggy result
I tried from the example in https://github.com/gsklee/ngStorage like this:
delete $localStorage.someArrayName[id];
but it deletes the values and I get null,null,null values in my local storage array. And then I even get ng repeat error about duplicate values:
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed...
I cannot handle it. I am not sure if it's some small issue or I am doing something fundamentally wrong. Can you give me some guidance? Thank you in advance!
This is how my array looks like saved in the localstorage:
[{"content":"something"},{"content":"else"}] //etc...
So you are using ng-repeat for something and your ids are there. If you use $index as value for your id parameter when you remove at item from the array, your array numbering is not longer the same and the id is not what you expect to be.
You also do not need the pop() and shift() methods.
Asuming your ng-repeat is something like this:
<element ng-repeat="item in someThing">
{{item.prop}} <childelem ng-click=delete($index)>delete</childelem>
</element>
and if your function is:
$scope.delete = function (id) {
$localStorage.someArrayName.splice(id, 1);
};
Then you would need something like this:
<element ng-repeat="item in someThing">
{{item.prop}} <childelem ng-click=delete(item)>delete item</childelem>
</element>
and:
$scope.delete = function (item) {
$localStorage.someArrayName.splice($localStorage.someArrayName.indexOf(item), 1);
};
and this is going to remove the entire {"content":"something"}
from your array.
No idea if this is the right direction of the problem and if this is the scenario, but I hope it will help you. Best regards!

remove specific item from a json object

i am trying to remove some items in an json object list, the ones that have a specific group. My JSON looks like this.
var events = [
{"id":"19","name":"sports","group":"1"},
{"id":"20","name":"school","group":"2"},
{"id":"21","name":"fun","group":"1"}
]
I tried this
for(var i in events)
if(events[i].group == deleted_group)
events.splice(i, 1);
But the problem of this, is that if i have to remove more items, it bugs out. Is there another easy way to to this ? I am open for sugestion even using underscore.js .
Thank you in advance, Daniel!
Try this
var events = [
{"id":"19","name":"sports","group":"1"},
{"id":"20","name":"school","group":"2"},
{"id":"21","name":"fun","group":"1"}
]
console.log(_.reject(events, function(event){ return event.group == '1'; }));
When you're using the "splice" function to remove elements from the array inside a for loop,
you need to shift your current index back when removing an item since the array is reindexed.
Also take a look at the array functions like "filter" for a more convenient way, read more on MDN.
You can use delete operator to delete objects (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete):
delete events[0]
The problem with delete is, that in your array, as a value of events[0] it will leave undefined.
So another way (the way I would choose for your simple example) is to just rewrite the array:
var temp_events = [];
for(var i in events)
if(events[i].group != deleted_group)
temp_events[temp_events.length] = events[i];
events = temp_events;
Executing splice in a for loop has complexity n^2 (where n is number of elements). Rewriting has linear complexity.

Categories