`How can I transform a DocumentSnapshot.data() object into a Map using TypeScript and Firestore?`

Currently working on an Angular Ionic project with Firestore and encountering a problem. Here is the code snippet that I am struggling with:

handler: data => {
     firebase.firestore().collection("categories").doc(`${data.name}`).get()
     .then((ds) => {
     if (!ds.exists){
         console.log("No such category");
     }
     else{ 
         let data = ds.data();
         let interested : Map<string, boolean> = data["interested"];
         console.log(Array.from(interested.keys());
         console.log(interested);
     }
});

My database has the following field:

Upon executing the code, the error message I receive is as follows:

Error: Uncaught (in promise): TypeError: interested.keys is not a function. (In 'interested.keys()', 'interested.keys' is undefined)

After checking the type of "interested", I found it to be an object instead of a Map, leading to none of the Map methods functioning on this variable. I would like to utilize these methods but unsure of how to make them work. Why are they not working and what steps should I take? Perhaps converting the data returned by Firestore into a JSON object could help?

Answer №1

While I haven't had the opportunity to work directly with Maps before, I recently came across nils's insightful response regarding "How to turn a simple object into an ES6 Map", and it got me thinking:

const safeObject = data['interested'] || {}; // just in case it's undefined
let interested: Map<string, boolean> = new Map(Object.entries(safeObject));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cross-origin resource sharing (CORS) is preventing access because the origin and allowed origin match

Utilizing Dockerized Ory Kratos and Angular (www folder hosted via nginx for header modifications) on localhost and attempting to run the following code: const headers = { Accept: 'application/json', }; fetch('http://127.0.0.1:4433/self-s ...

Tips for executing a loop and fetching a URL in Angular 8

I've been attempting to fetch data from a URL and convert it into a JSON file for display using HTML. The URL of the JSON only differs by one digit, ranging from 1 to 10, "https://jsonplaceholder.typicode.com/todos/1" Despite my efforts to create a l ...

How to send parameters with the fetch API

After completing a task that involved converting code from Angular HttpClient to using fetch API, I encountered an issue with passing parameters. Below is the original code snippet before my modifications: let activeUrl = new URL(this.serverAddress); ...

Encountering issues with integrating interactjs 1.7.2 into Angular 8 renderings

Currently facing challenges with importing interactive.js 1.7.2 in Angular 8. I attempted the following installation: npm install interactjs@next I tried various ways to import it, but none seemed to work: import * as interact from 'interactjs'; ...

There is an issue with the Hook call on the component list map in ReactJS

While working on Review components, I encountered an error when trying to use hooks. Here is the issue: I am using YhSection to manage my parallel components and utilizing array map to incorporate them in the layout content. Interestingly, if I use hoo ...

What is the reason behind functions evaluating to true in TypeScript?

Lately, I decided to delve into the world of TypeScript. I am intrigued by the fact that the following code snippet seems to work without any issues in this language: function f(): boolean { return false; } if ( f ) { performSomeAction(); } Desp ...

The error at events.js:154 was not properly handled and caused an 'error' event to be thrown

Encountered an error while creating an Angular 2 application. I followed the instructions from this link to create a sample application. Upon running npm start Received the following error, events.js:154 throw er; // Unhandled 'error' even ...

What is the most efficient way to update data multiple times by mapping over an array of keys in a react hook?

My question might not be articulated correctly. I'm facing an issue with dynamically translating my webpage using Microsoft's Cognitive Services Translator. I created a react hook for the translator, which works well when I need to translate a si ...

Determining the type of <this> in an Object extension method using TypeScript

I am attempting to incorporate a functionality similar to the let scope function found in Kotlin into TypeScript. My current strategy involves using declaration merging with the Object interface. While this approach generally works, I find myself missing ...

Component in Angular not reloading when routerLink is clicked

When attempting to trigger a click event, I am unable to reload the component. The code snippet that I have tried is as follows: (dealCode,periodName) => { let url:any='/valuation;dealcode=J9PPR;fundPeriod=2019Q3;useDefault=true'; t ...

Transforming an array of JSON items into a unified object using Angular

I need to convert an array list into a single object with specific values using TypeScript in Angular 8. Here is the array: "arrayList": [{ "name": "Testname1", "value": "abc" }, { "name": "Testname2", "value": "xyz" } ] The desired ...

Issues with the File plugin in Ionic 2

Currently, I am working on integrating Quickblox into my Ionic2 application. I have successfully implemented all the required functionalities except for file uploading. In Quickblox, there is a specific function that needs to be used for uploading files, a ...

Developing specialized error messages embedded within backend feedback using Angular

In my Angular8 application, the server consistently provides responses in the 200s series. Any errors from the server are encapsulated within the Response object, which means I have to generate errors from it. A standard response looks like this: The APP_ ...

Bidirectional linking and verification of a dropdown menu in Angular 2

I am attempting to implement two-way binding in Angular using a dropdown list. I also need the form to be considered invalid if no value is selected. See below for my code: <form class="form-horizontal" (ngSubmit)="submit(frm)" #frm ...

Creating personalized properties for a Leaflet marker using Typescript

Is there a way to add a unique custom property to each marker on the map? When attempting the code below, an error is triggered: The error "Property 'myCustomID' does not exist on type '(latlng: LatLngExpression, options?: MarkerOptions) ...

Utilize the parameters from the config.json file within the application

We've integrated the Google Maps API into our project and have generated a key for it. Currently, this key is hardcoded in one of our module files. However, we want to enhance security by moving this key into the config.json file. This way, when we pu ...

The deployment of the remix is unsuccessful in Vercel, even though it functions perfectly during development. The error message states that 'AbortController' is not

I'm new to React and could use some assistance with a deployment issue on Vercel. Any ideas on why this is failing? I haven't explicitly used AbortController anywhere, so I'm suspecting it might be related to one of the installed packages? ...

How can I resolve the ReferenceError in NextJs which states that Audio is not defined?

Recently, I implemented a Next component that acts as a music player, allowing users to play or stop the audio just like an MP3 player. While the functionality works perfectly fine on my local server – clicking the button triggers the audio play or pause ...

How can I populate a mat-table in Angular 7 with data stored in an object?

At the moment, my code is set up to populate a table with data. In my component.ts file: import { HttpClient } from "@angular/common/http"; import { Component, OnInit } from "@angular/core"; import { FormBuilder, FormGroup, Validators } from "@angular/fo ...

Error: Module 'react' not found. Please make sure it is installed and correctly imported

Recently, I've been working on developing a React app using TypeScript. To kickstart the project, I used yarn create react-app (name) --use-pnp --typescript. However, I encountered an issue with the TS linter repeatedly showing the error: Cannot find ...