Display a Key from Firebase Database
Published: 2022-08-16 22:56:43

Hello, I have a function where I am trying to display the user type when they're logged in. I currently have user name displaying but I'm not sure how to change my function to display the user's profile type. This is the error code I'm receiving and I have provided my code and a detailed screenshot of what I am trying to accomplish:

This is the error I'm getting:

Uncaught Error: child failed: path argument was an invalid path = "/Studiopick/studios[object HTMLParagraphElement]". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"
    at na (validation.ts:374:11)
    at ra (validation.ts:395:3)
    at os (Reference_impl.ts:543:5)
    at rs (Reference_impl.ts:483:31)
    at Su.ref (Database.ts:102:24)
    at getUserType (editprofile.js:74:25)
    at editprofile.js:88:1
This is my javascript code:


  
// Initialize Firebase
firebase.initializeApp(firebaseConfig);


//Creating sets in database
firebase.database().ref("/Studiopick/studios").child("users").update({
    
    
});

//Save information
function save(){
    studioName = document.getElementById("studioName").value;
    email = document.getElementById("email").value;
    firstName = document.getElementById("firstName").value;
    lastName = document.getElementById("lastName").value;
    address = document.getElementById("address").value;
    country = document.getElementById("country").value;
    state = document.getElementById("state").value;
    city = document.getElementById("city").value;
    zip = document.getElementById("zip").value;
    phoneNumber = document.getElementById("phoneNumber").value;
    firebase.database().ref("/Studiopick/studios/users").child(studioName).update({
    
    firstName : firstName,
    lastName : lastName,
    email : email,
    address : address,
    country : country,
    state : state,
    city : city,
    zip : zip,
    phoneNumber : phoneNumber,
    });

}

//Get Information
function getData(){
    studioName = document.getElementById("studioName").value;
    firebase.database().ref("/Studiopick/studios/users/" + studioName).on('value', function(snapshot){
        snapshot.forEach(function(getProfile){
           studioData = getProfile.val();
           studio = getProfile.key;


           var email = studioData["email"];
           
           

           console.log("studio name: " + studio, "email: " + email);
           currentUser = "<h3><strong>"+ studio + "</strong></h3>";
           document.getElementById("profile-name").innerHTML = currentUser;
        });
    });
}
getData();

//Get User Type
function getUserType(){
    profileType = document.getElementById("userType");
    firebase.database().ref("/Studiopick/studios" + profileType).on('value', function(snapshot){
        snapshot.forEach(function(getUserType){
           typeData = getUserType.val();
           type = getUserType.key;
           
           
           

           console.log("profile type: " + type);
           spAccType = "<p>"+ type + "</p>";
           document.getElementById("userType").innerHTML = spAccType;
        });
    });
}
getUserType();
What I'm trying to display from firebase:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l80kx2vulpcd7s3mfoge.jpg)

What I'm trying to achieve:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4txp52bny688lpfryv66.jpg)