So I am having an issue with Polymer 1.0's arrays not being passed as expected. I currently have a usersInOrg array that needs to be passed to another part of the app. The auto data-binding system works like a charm till I start trying to mutate the array with objects being added from inside a nested function.
Property:
usersInOrg: {
type: Array,
notify: true
},
Function:
_computeUsersInOrg: function(){
/************* userIdsObjectInOrg ***********
{
uid: true
uid2: true
uid3: true
...
}
********************************************/
var userIds = Object.keys(this.userIdsObjectInOrg);
// Empty old users (just in case)
this.usersInOrg = [];
// So I can use this.notifyPath or this.usersInOrg in the firebase call
var self = this;
for (var key in userIds) {
// Where the user is found in the database
var userRef = this.baseRef + '/users/' + userIds[key];
// Create query
var firebaseRef = new Firebase(userRef);
// Here is where I should be adding my people into the array
firebaseRef.on("value", function(snapshot) {
// This comes back fine { name: Jill, age: 23, ... }
console.log(snapshot)
// For debugging purposes (number are appearing correctly)
self.notifyPath('usersInOrg', [5,6]);
// Add in the user info to the array
self.push('usersInOrg', snapshot.val());
// Let index know I added it
self.notifyPath('usersInOrg', self.usersInOrg);
})
}
}
Output:
Users in Org: 5,6
Hello from shokka-admin-homepage
Why are objects not appending to my array? It should output 5,6,[Object object]
I would think.
As I was typing up this question I found the answer. If I delve into what the list looks like I can see better what I have. Here is what my list looks like when looping though and trying to show some data. I did not change any of the code from my question.
New Output:
Moral of the story: Arrays do not stringify Objects the same way Objects stringify themselves. When an object is in an Array it just simply skips it and moves on. Console logs are your friend.
Console Log Output: