CODEWITHSUNDEEP
javascriptfirebasevue.jsfirebase-realtime-databaseget
G Buis
G Buis

Reputation: 303

Get request username firebase [VUE]

I'm trying to setup a database with Firebase which also had a username field. I'm using the identity toolkit from Google (https://cloud.google.com/identity-platform/docs/reference/rest/v1/accounts/signInWithPassword) to do the sign up and login actions. But as far as I know I can't store a username in the sign up database because I can't alter the tables and stuff. Which is why I made my own Firebase database (see picture, the data in that database is stored through a POST request). What I'm trying to do is get the username through a GET request.

I can setup a connection to my own Firebase database and get an ok response. I'm doing this using the following code:

const responseUser = await fetch(
  `https://[firebase-link].firebasedatabase.app/users/${userId}.json`,
  {
    method: "GET",
  }
);

This works as I get a response when I log it, with a status 200 (which seems to be a correct connection). In the console.log I can also clearly see the corresponding userId I'm using in the request, which matches the userId in the database. So as far as I know I'm actually finding the correct user in the database, but there is no place where I Caan find the userName. The second screenshot is the response I'm getting. I've tried to open pretty much all options within the response but there's no place I can find the name which is in the database.

I know I'm missing something probably very simple, but I can't seem to figure it out. Can you guys help me out?

My Firebase databaseconsole.log response from GET request

EDIT: I'm trying to find another way to do it, I'm returning a list of all users (won't be that many anyway) and afterwards I'm using a for loop to go through every entry. See code below:

const responseUser = await fetch(
  `https://[firebase-link].firebasedatabase.app/users.json`,
  {
    method: "GET",
  }
);

// console.log(responseUser);

const responseUserData = await responseUser.json();
// console.log("ResponseUserData ===");
// console.log(responseUserData);

for (let userData in responseUserData) {
  let userId = responseData.localId;
  console.log("== userId");
  console.log(userId); // returns the user ID I need to filter the userData on

  console.log("== full user item");
  console.log(userData); // returns the user item, which contains userId and userName
  console.log("---------------------------------");

  // How do I filter to get the userName of userItem with corresponding userId?
}

Now all I need to do is to filter the userItem, like I stated in the final comment in my code. How though?

I've tried to filter the following way:

const user = responseUserData.filter(user => user.userId === userId)
console.log(user);

But that gives me an error Uncaught (in promise) TypeError: responseUserData.filter is not a function

Upvotes: 0

Views: 203

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83153

Have a look at the doc for the Fetch API: a call with fetch returns a Promise containing the response (a Response object). Then, to extract the JSON body content from the response, the doc indicates that you need to use the json() method, which "returns a Promise which resolves with a JavaScript object that is the result of parsing the body text as JSON".

The doc shows the following example, using twice the then() method (i.e. chaining the Promises) since two Promises are returned, as explained above.

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

In your case, since you use async/await, the following will do the trick:

const response = await fetch(
      `https://[firebase-link].firebasedatabase.app/users/${userId}.json`,
      {
        method: 'GET',
      }
    );

const responseData = await response.json();
console.log(responseData);
console.log(responseData.userName);

Upvotes: 1

Related Questions