What is the best way to retrieve a Map object from Firebase in a TypeScript environment?

Question

What is the best way to retrieve a Map object from Firebase in a TypeScript environment?

Currently, I am working on a cloud function in TypeScript, where I am attempting to retrieve a Map object (also known as nested objects or maps) from Firebase in order to iterate through it.

Here is the structure of my Firebase data:

https://i.sstatic.net/clICC.png

My goal is to access the data like this:

const tokenSettingsRef = db.collection('tokenSettings').doc('spread')
transaction.get(tokenSettingsRef).then((tokenSettingsDocSnapshot) => {
    const tokenData = tokenSettingsDocSnapshot.data()
    if (typeof tokenData !== 'undefined') {
        console.log("token name 3: " + tokenData.tokens[0])
        console.log("token name 4: " + tokenData)
        console.log("token name 5: " + tokenData.tokens)
        console.log("token name 1: " + tokenData.tokens.length)
        console.log("token name 2: " + tokenData.tokens.keys())
        const variations = new Map(Object.entries(tokenData.tokens));
        console.log("token name 5: " + variations.keys)
        console.log("token name 6: " + variations.values)
    }

However, none of the approaches above are providing me with the Map I need to use or even log out. The data I am receiving appears to be something like [object Object].

I have successfully retrieved arrays and plain objects before, so I am puzzled about what I am missing here.

typescript firebase google-cloud-platform google-cloud-firestore google-cloud-functions

Answer 1

Answer №1

It appears that you are reading data within a transaction based on the code provided in your question. Here is a solution that should work:

var tokenSettingsRef = db.collection('tokenSettings').doc('spread');

db.runTransaction(transaction => {
    return transaction.get(tokenSettingsRef).then(tokenSettingsDocSnapshot => {

        if (!tokenSettingsDocSnapshot.exists) {
            throw "Document does not exist!";
        }

        var tokensMap = tokenSettingsDocSnapshot.data().tokens;
        //Let's print all the keys and values of the tokens map
        Object.keys(tokens).forEach(e =>
          console.log(`key=${e}  value=${tokens[e]}`)
        );
        //...... Continue the transaction
    });
}).then(function() {
    //....
})
.catch(error => {
    console.log('Transaction failed: ', error);
});

If you want to retrieve a Map<number, number> object from it, here is how you can do it:

var tokensMap = tokenSettingsDocSnapshot.data().tokens;

  const transformedTokensMap = new Map<number, number>();
  Object.keys(tokensMap).forEach(e => {
      transformedTokensMap.set(Number(e), tokensMap[e]);
});

Answer 2

It appears that you are reading data within a transaction based on the code provided in your question. Here is a solution that should work:

var tokenSettingsRef = db.collection('tokenSettings').doc('spread');

db.runTransaction(transaction => {
    return transaction.get(tokenSettingsRef).then(tokenSettingsDocSnapshot => {

        if (!tokenSettingsDocSnapshot.exists) {
            throw "Document does not exist!";
        }

        var tokensMap = tokenSettingsDocSnapshot.data().tokens;
        //Let's print all the keys and values of the tokens map
        Object.keys(tokens).forEach(e =>
          console.log(`key=${e}  value=${tokens[e]}`)
        );
        //...... Continue the transaction
    });
}).then(function() {
    //....
})
.catch(error => {
    console.log('Transaction failed: ', error);
});

If you want to retrieve a Map<number, number> object from it, here is how you can do it:

var tokensMap = tokenSettingsDocSnapshot.data().tokens;

  const transformedTokensMap = new Map<number, number>();
  Object.keys(tokensMap).forEach(e => {
      transformedTokensMap.set(Number(e), tokensMap[e]);
});

What is the best way to retrieve a Map object from Firebase in a TypeScript environment?

Answer №1

Similar questions

Trouble with Angular 7: Form field not displaying touched status

Troubleshooting: Issues with Angular 2 Dependency Injection

Ways to use DecimalPipe for rounding numbers in Angular - Up or down, your choice!

Differentiating functions in Typescript through method overloading by inferring the second argument's type based on the first argument's

An issue has occurred: Unable to access the 'seatsavailable' property of an undefined object

What is the best way to implement pipes and incorporate reusable action buttons in a Mat-table component for maximum reusability?

Could someone provide an explanation for the meaning of the phrase "class User extends Model<UserAttribute UserCreationAttribute>"?

Modifying the user interface (UI) through the storage of data in a class variable has proven to be

Utilizing React to pass parent state to a child component becomes more complex when the parent state is derived from external classes and is subsequently modified. In this scenario,

Error message: "Using AngularFire 2 caused an issue as Firebase is not identified as a

Issue with ESLint error in TypeScript PrimeReact async Button click handler

Template specific requirements in Angular

Stripe has encountered an error stating that the provided identifier does not correspond to any user record in the system

Posting forms in NextJS can be optimized by utilizing onChange and keypress events for input fields

Is there a specific instance where it would be more appropriate to utilize the styled API for styling as opposed to the sx prop in Material-

The boolean type in TypeScript is throwing an error because it does not have any call

Tips for effectively combining the map and find functions in Typescript

Steps for incorporating moment.js into an Angular 2 project

What methods can be used to display data using TypeScript's Optional Chaining feature?

Ways to effectively utilize the $getDownloadURL() promise within the ng-repeat directive in Angularjs 1.6