An issue has occurred: function() is not a valid function

Issue:

core.mjs:10132 ERROR TypeError: block.getDepartment is not a function
    at FirebaseService.mapDatabaseToBlock (firebase.service.ts:54:30)
    at firebase.service.ts:45:60
    at Array.map (<anonymous>)
    at firebase.service.ts:45:42
    at map.js:7:37
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183:16)
    at SafeSubscriber.next (Subscriber.js:122:22)
    at Subscriber._next (Subscriber.js:72:26)

Code snippet in firebase-service.ts:

retrieveAllBlocks() {
    const blocksRef: AngularFireList<any> = this.db.list('blocks');
    this.blocksData = blocksRef.valueChanges().pipe(
      map((blocks: any[]) => {
        const transformedBlocks = blocks.map(block => this.mapDatabaseToBlock(block)); //<-----
        this._blocks = transformedBlocks;
        return transformedBlocks;
      })
    );

  }

mapDatabaseToBlock(block: Block): Block {
    const department = block.getDepartment(); //<------ ERROR
    const reorderedData = {
      department: block.department,
      description: department.description,
      hash: block.hash,
      id: department.id,
      message: block.message,
    };

Code snippet in block.ts:

getDepartment(): Department {
    return this.department;
  }

I am attempting to save an object in the firebase real-time database. Due to reordering of fields there, I need to make these adjustments. However, I am encountering the mentioned error.

Answer №1

The reason for this issue is that blocksRef is defined as a list of type any (AngularFireList<any>). When this.db.list('blocks') is called, the data is converted to generic objects instead of preserving the desired class.

To fix this, update the type declaration to:

const blocksRef: AngularFireList<Block> = this.db.list('blocks');

Additionally, make sure to replace all occurrences of any with the actual class you are using - blocks: Block[]

retrieveAllBlocks() {
  const blocksRef: AngularFireList<Block> = this.db.list('blocks');
  this.blocksData = blocksRef.valueChanges().pipe(
  map((blocks: any[]) => {
    const transformedBlocks = blocks.map(block => this.mapDatabaseToBlock(block)); //<-----
    this._blocks = transformedBlocks;
    return transformedBlocks;
  })
);

It's best practice to avoid using any to prevent encountering these issues in the future!

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

Something seems to be amiss with the validation functionality in jQuery

After creating a simple form with input fields and a button, I added validation to display an error message when clicking the apply button without filling out required values. However, the code is not functioning as intended. Even though error messages are ...

Guidelines for combining inner objects with their parent in Javascript

I need assistance with using the filter function in Angular.js because it's not working on objects. Is there a way to merge a nested object into its parent using Javascript? For example, I have the following data structure: { "data" : [ { "ch ...

I am experiencing an issue where my Laravel website does not refresh automatically

Having trouble with the URL (url: "/ultimo-pedidox"). It seems to be loading correctly, but the view isn't refreshing as expected. @extends('store/template') @section('content') <div style="margin-top: 55px;" ...

Accessing and playing audio files from Amazon S3 within Python code

I am attempting to directly read an audio file from S3 using Python. Initially, I record the audio with the following blob settings: blob = new Blob(audioChunks,{type: 'audio/wav'}); Then, I upload this file to S3 using Django: req=request.POST ...

Ways to troubleshoot setTimeout functioning during HTTP requests?

Utilizing Socket IO in my client app, I have implemented a feature to check for unread events. The process involves making a request to the backend, which then sets a 5-second timeout before checking for any new events and sending them back. // client soc ...

Bar chart with overlays in Chart.js

I am currently working with a ChartJS bar chart and attempting to create overlapping bars. Each date should have three bars, each overlapping the others. Here is my idea: The bar with the highest value should have a z-index of 0, making it the tallest co ...

Check the email for accuracy and show as needed

I need help verifying email validity in JavaScript and displaying an alert box if it's invalid. If the email is valid, I want to display div2 instead. However, my current code doesn't seem to be working as expected. Below is the JavaScript code ...

The process of departing a SocketIO room and switching to a different room logic

I am wondering how I can leave the Room when I click on a new Room Here is what my page looks like: https://i.sstatic.net/vuwv0.png The list on the left side is from the MySQL Server and it displays a list of my chats. Each Room name has an id value whi ...

Exploring the world of dynamic locale with Angular 5 Pipes

My current situation involves having apps created in angular 4 and I am contemplating upgrading to angular 5. After researching how locale is managed in the pipes, it appears that upgrading may not be feasible. It seems that there are two options provided: ...

Vue - the <script setup> element is unable to execute scripts

I have a functional widget from Atlassian that works as expected when used in an HTML file: <html lang="en"> <head> <script data-jsd-embedded data-key=<key> data-base-url=https://jsd-widget.atlassian.com src=https://jsd-w ...

Utilizing Facebook's UI share URL parameters within the Facebook app on mobile devices

Encountering an issue with the Fb ui share functionality on certain smartphones Here is the function: function shareFB(data){ FB.ui({ method: 'share', href: data, }, function(response){}); } Implemented as follows: $urlcod ...

Enable checkboxes to be pre-selected upon page loading automatically

Although I've found a lot of code snippets for a "select all" option, what I really need is more direct. I want the WpForms checkboxes to be pre-checked by default when the page loads, instead of requiring users to press a button. My goal is to have a ...

IntelliJ is unable to locate the scss import when using the includePaths option in stylePreprocessorOptions

Having trouble with IntelliJ 2019.2.2 Ultimate not detecting scss imports from stylePreprocessorOptions - includePaths Here is the directory structure: https://i.stack.imgur.com/SQEDT.png In my angular.json file, I have specified: "stylePreprocessorOpt ...

Next.js API routes encountering 404 error

I am encountering an issue with calling my route API (404) in my new nextjs project. The route API can be found at src/app/api/speed.js Within my page src/app/page.tsx, I have the following code snippet: fetch("api/speed").then(res=>res.json ...

Exploring the internet with Internet Explorer is like navigating a jungle of if statements

I am facing an issue with my code that works well in Chrome, but encounters errors in IE. The if condition functions correctly in Chrome, however, in IE it seems like the first condition always gets executed despite the value of resData. Upon analysis thro ...

Simple method to modify the text size of the entire HTML page

Looking for a way to adjust the font size of an entire HTML document? I'd like to have two buttons - one to increase the font size and the other to decrease it. Each button will trigger a JavaScript function; function increaseFontSize(){ //Increase ...

Tips for individually assigning Fastify decorators within various plugins?

I'm encountering issues with typing decorators in two separate plugins (scopes): import Fastify, { FastifyInstance } from 'fastify' const fastify = Fastify() // scope A fastify.register((instance) => { instance.decorate('utilA&apo ...

The deep reactivity feature in Vue3 is functioning well, however, an error is being

I am currently using the composition API to fetch data from Firestore. While the render view is working fine, I am encountering some errors in the console and facing issues with Vue Router functionality. This might be due to deep reactivity in Vue. Here is ...

Using jQuery within an Angular Controller: The specific function $(...).overhang is not recognized in this context

Recently, I decided to integrate overhang.js into my application because of its appealing alert messages. Initially, it seemed like a simple task... All I needed to do (or so I thought) was replace the line in my controller, alert("An HTTP request has be ...

Typescript's Accessor decorator ensures that the decorated code is executed only once, fetching the previously calculated value for any subsequent calls

The topic discussed here originates from a previous discussion on a method decorator in Typescript. In some scenarios, there are `get` methods in a Typescript class that involve intensive computations. Some of these methods always return the same result an ...