Epifanio Epifanio - 2 months ago 10
AngularJS Question

Error access the properties of a query - AngularJS + Firebase

I have problems with basic query firebase, it is with the rest of the application have no problem to bring data and work with them. And even with authentication firebase.

However, with these queries, when I try to access its properties returns an undefined me. Although it is clearly defined.

Does anyone see the stupid error? Thanks

Versions with whom I work are:

"dependencies": {
"angular": "^1.5.8",
"bootstrap": "^3.3.7",
"angular-bootstrap": "^2.1.0",
"angularfire": "^2.0.2",
"firebase": "^3.3.2",
"angular-animate": "^1.5.8",
"angular-route": "^1.5.8",
"textAngular": "^1.5.11",
"angular-socialshare": "angularjs-socialshare#^2.3.1",
"angular-timeago": "^0.4.3"
}


This is the view:

<div ng-controller="blogpostCtrl">
{{post}}
{{post.Title}}
</div>


This is the content of firebase:

{
"blog" : {
"posts" : {
"-KT9vxYoCkly93GqTSY7" : {
"CreationDate" : 1475504757165,
"Post" : "<p>esto es una prueba de post</p>",
"Title" : "esto es una prueba",
"Url" : "esto_es_una_prueba",
"isPublished" : true
},
"-KTA-f-BDAzC-4T4a50K" : {
"CreationDate" : 1475505991860,
"Post" : "<p>dsf sdf sdfs fd</p>",
"Title" : "o1i21o3i",
"Url" : "o1i21o3i",
"isPublished" : true
},
"-KTA-ggQSQLnDr4eQtfi" : {
"CreationDate" : 1475505998783,
"Post" : "<p>ds sdf sdf</p>",
"Title" : "4 45654456 2546345562535",
"Url" : "4_45654456_2546345562535",
"isPublished" : true
}
}
}
}


This is the controller:

app.controller("blogpostCtrl", function($scope, $location, $routeParams, $firebaseArray) {
var ref = firebase.database().ref("blog/posts");

$scope.post = $firebaseArray(ref.orderByChild("Url").equalTo($routeParams.uri));

console.log($scope.post)
console.log($scope.post.Title) //<------------ undefined

firebase.database().ref("blog/posts").orderByChild("Url").equalTo($routeParams.uri).once('value').then(function(snapshot) {
console.log(snapshot.val())
console.log(snapshot.val().Title) //<------------ undefined
});
firebase.database().ref("blog/posts").on('value', function(snapshot) {
console.log(snapshot.val())
console.log(snapshot.val().Title) //<------------ undefined
});
});


And this is the console output:

[]0: Object$$added: ()$$error: ()$$getKey: ()$$moved: ()$$notify: ()$$process: ()$$removed: ()$$updated: ()$add: ()$destroy: ()$getRecord: ()$indexFor: ()$keyAt: ()$loaded: ()$ref: ()$remove: ()$save: ()$watch: ()length: 1__proto__: Array[0]
ctrl.js:163 undefined
ctrl.js:170 Object {-KT9vxYoCkly93GqTSY7: Object, -KTA-f-BDAzC-4T4a50K: Object, -KTA-ggQSQLnDr4eQtfi: Object}-KT9vxYoCkly93GqTSY7: Object-KTA-f-BDAzC-4T4a50K: Object-KTA-ggQSQLnDr4eQtfi: Object__proto__: Object
ctrl.js:171 undefined
ctrl.js:166 Object {-KTA-ggQSQLnDr4eQtfi: Object}-KTA-ggQSQLnDr4eQtfi: ObjectCreationDate: 1475505998783Post: "<p>ds sdf sdf</p>"Title: "4 45654456 2546345562535"Url: "4_45654456_2546345562535"isPublished: true__proto__: Object__proto__: Object
ctrl.js:167 undefined

Answer

.Title is a property of the child object so this is why you are getting undefined. If you need that Title you must include the object key as well, for example:

console.log($scope.post.blog.posts['-KT9vxYoCkly93GqTSY7'].Title)

Check this fiddle based on your json response http://jsfiddle.net/b2pfLp26/

About your $filterArray you have to wait before getting the console printed so you have to make use of .then.

var array = $firebaseArray(ref.orderByChild("Url").equalTo($routeParams.uri));

array.$loaded().then(function(response){
  console.log(response);
});
Comments