retrieving firebase database value in angularjs - angularjs

screenshot of database structure
Auth.$onAuthStateChanged(function(authUser){
if(authUser){
console.log(authUser);
var ref = firebase.database().ref().child("users");
console.log("ref::" +ref);
//var rec = $firebaseArray(ref);
var usersRe= ref + "/" + authUser.uid + authUser.$id;
console.log(usersRe);
var userObj=$firebaseObject(usersRe);
$scope.currentUser=userObj;
}else{
$scope.currentUser='';
}
});
https://loginsystem-1ab0d.firebaseio.com/users/avL76HGunuYTG2fR3uO3OEblXZ33/
enable to get the child of userId(avL76HGunuYTG2fR3uO3OEblXZ33) which is the
key.

I think you're missing a slash and not using ref correctly. You don't append strings onto the ref, you would do a .child(...)
var usersRef = firebase.database().ref()
.child("users")
.child(authUser.uid + '/' + authUser.$id)

Related

realtime firebase database get property name and value on child_changed

I am working on real-time fire-base database.
i have a issue in getting value what is changed in fire-base.
i have client social database inside it posts and then kkkm(this is key) and then different properties and values and what i want is to toggle approval and rejected values like that approval:true but what i get is just true/false not the property name.
toggleCheck = (id) => {
var ref = firebase.database().ref('posts/'+id);
ref.off("child_changed");
var approval;
ref.on("child_changed", function (data) {
approval = data.val();
console.log("=============================");
console.log("The updated approval is " + approval);
});
}
toggleClose = (id) => {
var ref = firebase.database().ref('posts/'+id);
ref.off("child_changed");
var rejected;
ref.on("child_changed", function (data) {
rejected = data.val();
console.log(ref.getKey());
console.log(ref.getValue());
console.log("=============================");
console.log("The updated rejected is " + rejected);
});
}
I'm not 100% sure to understand what you want to do ("toggle approval and rejected values"?) but, based on the code in your question, the following is probably what you are looking for:
var ref = firebase.database().ref('posts/' + id);
ref.on('child_changed', function(data) {
console.log(data.key); // <-- Name of the field/node that was modified
console.log(data.val()); // <-- Value of the field/node that was modified
console.log("The updated" + data.key + " is " + data.val());
});
Explanations:
data is a DataSnapshot which has:
A key property, which is "the key (last part of the path) of the location of this DataSnapshot."
A val() method, which "extracts a JavaScript value from a DataSnapshot."
UPDATE FOLLOWING YOUR COMMENTS
I understand that you want to get both the values of the approval and rejected nodes (fields) when something changes in the post.
Therefore you should use the value event type instead of the child_changed one, as follows:
var ref = firebase.database().ref('posts/' + id);
ref.on('value', function(data) {
var approved = data.val().approved;
var rejected = data.val().rejected;
var object = {'approved': approved, 'rejected': rejected};
//Do whatever you want with the object
console.log(object);
});

http.get attempts to retrieve image when parsing when I do not need it to

function getHTMLSource(url) {
return $http.get(url).then(function(response) {
var html = response.data;
url = getDetailPage(html)
return url ;
}
)};
getHTMLSource('http://www.footpatrol.co.uk/s:282524/search=282524/')
Whenever I attempt the above code, I get the following error message in my console GET http://localhost:9000/templates/footpatrol.co.uk/_assets/images/content/footpatrol_logo.png 404 (Not Found).
The image appears to exist at http://www.footpatrol.co.uk/templates/footpatrol.co.uk/_assets/images/content/footpatrol_logo.png but as I am running the scipt on localhost with Chrome's Allow-Control-Allow-Origin plugin, it appears to not play nicely. I do not want to GET the image I just want the source code, is there anyway around this?
UPDATE: I think it might be my parser causing the problem, because the error message is thrown here
function getDetailPage(html) {
var temp = document.createElement('div');
temp.innerHTML = html;
var a = temp.querySelector('a[class*=\'fp-product-thumb-link\']');
var partOfUrl = a.href;
var splitUrl = partOfUrl.split('/');
var url = 'http://www.footpatrol.co.uk/' + splitUrl[3] + '/' + splitUrl[4];
var url = 'http://www.footpatrol.co.uk/' + splitUrl[3] + '/' + splitUrl[4];
$log.debug('Detail page url found: ' + url);
return url;
}
Instead of creating an element, use the DOMParser API:
function getDetailPage(html) {
//var temp = document.createElement('div');
//temp.innerHTML = html;
var parser = new DOMParser();
var temp = parser.parseFromString(html, "text/html");
var a = temp.querySelector('a[class*=\'fp-product-thumb-link\']');
//var partOfUrl = a.href;
//console.log(partOfUrl);
//var splitUrl = partOfUrl.split('/');
//var url = 'http://www.footpatrol.co.uk/' + splitUrl[3] + '/' + splitUrl[4];
var elem = angular.element(a);
var url = 'http://www.footpatrol.co.uk/' + elem.attr('href');
console.debug('Detail page url found: ' + url);
return url;
}
Detail page url found: http://www.footpatrol.co.uk//footwear/282524-air-retro-15-obsidian.html

remove slash from $location.url() in angular

I need to get the GET params from url and pass it in the links to view in angular
I got from location.url() => "/?x=1&b=2"
but I need to get = > "?x=1&b=2" without slash
I tried to do that like the following:
var str = $location.url();
var x = str.replace(/\\/g, '');
but it kept the slash
var str = $location.url().substr(1);
Suggestion:
if you use route get the parameters with $routeParams
you can access the params like:
$routeParams.x
Answer to question:
Do it like a famous question suggests:
How can I get query string values in JavaScript?
function getParameterByName(name, url) {
if (!url) {
url = window.location.href;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
To be used like:
var x = getParameterByName('x');

Recover data from within children with Angularjs

can anybody help me? I'm having a problem similar to the previous post. I'm just not getting the child object. I have tried in several ways the most basic and logical would be: newPost.musician.statusbatera
Follows a chrome debug print: --Screen Shot--
I'm not getting it because of the key generated automatically by firebase as the print in attached.
My code:
var db = firebase.database();
var ref = db.ref("users");
ref.on("child_added", function(snapshot) {
var newPost = snapshot.val();
console.log("Musician: " + newPost.musician.statusbatera);
});
You can grab the autogenerated key using Object.keys, then you can assign the object you need:
ref.on("child_added", function(snapshot) {
var newPost = snapshot.val();
keys = Object.keys(newPost.musician)
console.log("Musician: " + newPost.musician[keys[0]].statusbatera);
});
in theory, there should be only one value in keys...
I think you want to iterate through musician's list, if so, give this a try :-
for(var i = 0; i <= newPost.musician.lenght; i++) {
console.log("Musician: " + newPost.musician[i].statusbatera);
}

serialize a client-side made string to a server-side file angularJS

So i'm building a string which is actually an xml file. Since i can't save any file from client-side for security issues, i'd like to save this string in a xml file server-side.
i've read about $http method or upload plugin but it seems a bit a complicated for just sending a string to my server.
is there an easier way to do it?
For informative purpose, here is my code :
$scope.addBlock = function(){
if($scope.parentblock == null)//creation of a lvl1 element
{
var div = document.createElement("div");
//xml creation
var elmt = document.createElement($scope.selectedtype.tagname);
//
div.setAttribute('id',$scope.blocktitle);
div.setAttribute('lvl',0);
var path = '/'+$scope.selectedtype.tagname;
div.setAttribute('path',path);
div.innerHTML = '<h1>' + $scope.blocktitle + '</h1><p> path : '+ path + '</p>';
if($scope.blockvalue)
{
div.innerHTML = div.innerHTML + '<p>' + $scope.blockvalue + '</p>';
//adding value to xml tag
elmt.innerHTML = $scope.blockvalue;
//
}
document.getElementById('blocks').appendChild(div);
//xml adding
doc.appendChild(elmt);
console.log(doc);
//
$scope.blocks.push([$scope.blocktitle,$scope.selectedtype.tagname,$scope.parentblock,path]);
}
else //creation of a lvl n element
{
var div = document.createElement("div");
//xml creation
var elmt = document.createElement($scope.selectedtype.tagname);
//
div.setAttribute('id',$scope.blocktitle);
var lvl = Number(document.getElementById($scope.parentblock[0]).getAttribute('lvl'))+1;
div.setAttribute('lvl',lvl);
var path = ($scope.parentblock[3]+'/'+$scope.selectedtype.tagname);
div.innerHTML = '<h2>' + (new Array(lvl + 1).join("&nbsp")) + $scope.blocktitle +
'</h2><p>' + (new Array(lvl + 5).join("&nbsp")) + ' path : '+ path + '</p>';
if($scope.blockvalue)
{
div.innerHTML = div.innerHTML + '<p>' + (new Array(lvl + 5).join("&nbsp")) +
$scope.blockvalue + '</p>';
//adding value to xml tag
elmt.innerHTML = $scope.blockvalue;
//
}
document.getElementById($scope.parentblock[0]).appendChild(div);
//xml adding
doc.getElementsByTagName($scope.parentblock[1].toLowerCase())[0].appendChild(elmt);
//
$scope.blocks.push([$scope.blocktitle,$scope.selectedtype.tagname,$scope.parentblock,path]);
}
//console.log(doc);
}
I need to send doc to my server.
EDIT :
i really need to send an xml since is a iso19110-normalized file that i have to save.
I tried this :
$http({
method: 'POST',
url: 'save.php',
data: { 'doc' : doc.outerHTML },
headers: {'Content-Type': 'text/xml'}
})
.success(function(data){
alert(data);
})
.error(function(){
alert('fail');
});
and this in php :
file_put_contents('test.xml', $_POST['doc'])
but i've got "index doc undefined" ...
I also tried
$http.post('save.php',doc).success(function() {
return console.log('uploaded');
});
but i got 'Converting circular structure to JSON'
So i think my problem come from the location of the data. I can't figure where it is...
If you need to send a lump of text to your server (over http) then you should use the $http.post() method. Its easy to use and works like a charm. You can receive and save the data on the server in any number of ways, presumably you have this bit worked out?
The real issue from your question, imo, is whether you really need to be sending xml? A much easier way of sending your data would be to use JSON. Then you don't need to go through all that document building rigmarole. Instead you can just build a javascript object and send it using the $http.post() method letting angular do all the work for you.
var doc;
doc = {
id: $scope.blocktitle,
lvl: 0
// rest of your doc structure here
};
$http.post('/my-url/upload/doc', doc).success(function() {
return console.log('uploaded');
});

Resources