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

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.

Related

adding data to firebase realtime database from an object (web)

I have an object containing multiple key value pairs, I want to add all the keys and their values, from inside the object to an existing node, without disturbing the data already present inside the node.
If i write like this
var ref = firebase.database().ref("hams/spam_words/");
ref.update({
new_words_ham //new_word_ham is an object containing n number of words
});
it will add new_words_ham as another child node inside the main node , i cannot have that
even using a forloop on the object does not work
var ref = firebase.database().ref("hams/spam_words/");
for(var i in new_words_ham){
var word = i
ref.update({
i
});
I am new to js as well as to firebase. Please do tell me if i have got any concept wrong
Your existing code
//new_word_ham is an object containing n number of words
firebase.database().ref("hams/spam_words/").update({
new_words_ham
});
Can be rewritten as
firebase.database().ref("hams/spam_words/").update({
new_words_ham: new_words_ham
});
when the shorthand syntax is expanded. What I believe you want is simply
firebase.database().ref("hams/spam_words/").update(new_words_ham);

showing data in angular

can anyone helping me about showing just value of property in angular,
code snippet in my html :
<p>{{ tag }}</p>
code snippet in my controller.js :
var resource = $resource('/about');
resource.query(function(result){
$scope.tag = result;
});
I'm using mongodb for database which contain data {'name':'blablablablabla'},
when I run this code i get [{'name':'blablablablabla'}] in my browser, this is not what i want, i just want showing name value which is 'blablablabla' in html
Try accessing the name property directly:
$scope.tag = result[0].name;
[{'name':'blablablablabla'}] is an array containing 1 object inside. To access the name property of this object you can simply assign it as
$scope.tag = result[0].name;
You get as result the entire JSON returned from your MongoDB.
What you want is to get just the name, so:
$scope.tag = result[0].name;
You need a forEach on result, and $scope.tag will be:
$scope.tag = result[index].name;
Your array result must have only one element.

Updating array items angularfire

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,

How Do I Make an Array of Objects a Reactive Data Source?

I have an array of objects. Say
var
sidelist = [
{
name:"asdf",
id:1234,
types:[...]
}
];
Every object is turned into a box on the page using this construct
Template.global.side = function(){
var obj = [], m;
m = 1;
for (var i in sides){
obj.push({
index : m,
object : sides[i]
});
}
return obj;
}
The HTML:
{{#each side}}
<div class="span{{this.index}}" id={{this.object.id}}>
<div class="side-head">{{this.object.name}}</div>
</template>
There is a function that creates and pushes a new object into the array. How do I make the row of boxes reactively update on the page when the array they depend on changes?
So when I add a new object a new box should appear.
If you want to use Dependencies, it can look like this:
var sidelist = ...;
var sidelist_dep = new Deps.Dependency;
Template.global.side = function(){
sidelist_dep.depend();
// Do your stuff here;
return ...;
};
// Important: call this every time you change sidelist,
// AFTER the change is made.
sidelist_dep.changed();
See: http://docs.meteor.com/#deps
In almost all cases, you should put the objects in a Meteor Collection instead of an array that is part of a reactive object. There are many reasons for this, including the following
Adding, removing, searching, and updating will all be faster
The reactivity will be on the element level instead of the array
Meteor won't re-render the whole set of objects when something is added or deleted - just the change
You can define a sort order on the collection, making it much more flexible than a fixed sequence
Take a look at Andrew Wilcox's isolate-value smart package:
https://atmosphere.meteor.com/package/isolate-value
The README contains the exact example of selectively rerendering relevant templates when values are added/removed from an array stored in a Session varaible.

How to append values to the custom data stored in an element

Let's say I want to store some custom value in a element, I would need:
$('div').data('k','v');
But now I need to add more data to that element: v2.
The only way I could come up with is to somehow store or reference the previous data, and append to it, but it doesn't look like the best way to do it nor the most efficient:
$('div').data('k','v');
var prevData = $('div').data('k');
$('div').data('k',prevData + ',v2');
alert($('div').data('k'));
This will alert v,v2 as it should, but is this the correct approach?
You can use lists as data attributes:
$('.selector').data('test', []);
var list = $('.selector').data('test');
list.push('foo')
It's pretty useful, also because you can fill data- attributes with JSON in the HTML at page generation time, and .data() will automatically convert them to normal JS objects.
if you are using array as data atribute, you can do this
$('.selector').data('list', []);
$('.selector').data('list').push(1);
$('.selector').data('list').push(2);
$('.selector').data('list'); // Will return [1,2]

Categories