Javascript(React) Object.keys and Object.getOwnPropertyNames are returning empty array

Question

7aubI5jQAOXH1qbcIKar: {createdAt: Timestamp, displayName: "Test1", email: "test1@gmail.com", postData: "ssssssssssssss"}

thc72BNvjAjznPQmfgSj: {createdAt: Timestamp, displayName: "Test2", email: "test2@gmail.com", postData: "aaaaaaaaaaa"}

zt4mZhfoTc9klAdK11a8: {createdAt: Timestamp, displayName: "Test3", email: "test3@gmail.com", postData: "ddddddddddddd"}

__proto__: Object

I get this object from firebase posts collection and storing it in the data object in firebase.utils.js file. This is what i get from console log. It's look normal object but when i try to get Object.keys or Object.getOwnPropertyNames its returning empty array and i couldn't find why it is returning empty array.

Firebase.utils.js file

export const getFollowingUserPosts = (currentUser, followers) => {
  if (!currentUser) return;
  const data = {};
  followers.forEach(follower => {
    firestore
      .collection(`users/${follower}/posts`)
      .get()
      .then(snap => {
        snap.forEach(doc => {
          Object.defineProperty(data, doc.id, {
            value: doc.data(),
            enumerable: true
          });
          // data[doc.id] = doc.data();
        });
      });
  });
  console.log(Object.keys(data));
  console.log(data);
  return data;

UPDATE I found that blue i on chrome dev tools its saying

Value below was evalueted just now.

But why doing this? The code is not async.

score 0 · Accepted Answer · answered Jan 21 '20 at 14:01

Because .get() returns a promise, so the execution sequence is like: forEach get() -> console.log -> promise resolved

If you want to wait for the api call, you need to return a promise

export const getFollowingUserPosts = (currentUser, followers) => {
  if (!currentUser) return;

  const get = (follower) => {
    return new Promise((resolve) => {
      firestore
      .collection(`users/${follower}/posts`)
      .get()
      .then(snap => {
        snap.forEach(doc => {
          Object.defineProperty(data, doc.id, {
            value: doc.data(),
            enumerable: true
          });
          resolve(doc.data())
        });
      });
    })
  }

  return Promise.all(
    followers.map(follower => get(follower))
  );
}

then you can get data by:

getFollowingUserPosts().then(data => {
   //data
})

Javascript(React) Object.keys and Object.getOwnPropertyNames are returning empty array

1 Answers1