Oops! An error occurred: Uncaught promise in TypeError - Unable to map property 'map' as it is undefined

Encountering an error specifically when attempting to return a value from the catch block. Wondering if there is a mistake in the approach. Why is it not possible to return an observable from catch?

.ts

  getMyTopic() {
    return this.topicSer.getMyTopics().map((res: any) => res.json()).map((res: any) => res = res.categories)
      .catch((err: any) => {
        console.log('err', err);
        return []
      })
  }    

provider.ts

  getMyTopics(): Observable<any> {
       if (typeof this.userService.userDetails != 'undefined') {
          this.localCacheService.getItem(this.localCacheService.discoverTopicsKey).then((val) => {
        if (val != null && val.length == 0) return this.apiService.get(config.discover_topic_WITHAUTH);
         }).catch(() => {
       return this.apiService.get(config.discover_topic_WITHOUTAUTH);//here is the issue
          });
        }

Error

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'map' of undefined
TypeError: Cannot read property 'map' of undefined
    at Discover.webpackJsonp.402.Discover.getMyTopic (discover.ts:123)
    at Discover.webpackJsonp.402.Discover.getData (discover.ts:69)
    at discover.ts:51
    ...
    ...
    ...

/* Several lines of error messages */

Answer №1

The getMyTopics function does not have a return value. Additionally, the catch operator is incorrectly returning an empty array instead of an Observable.

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

Storing information in an array based on a specific flag

Currently, I am developing an Angular application where I am dealing with a specific array that contains a flag named "checked". Based on the value of this flag, I need to perform certain manipulations. Here is a snippet of my sample data: const data = [{ ...

How and where should you define the Angular catch all route for handling page not found errors?

In my project, I have a primary app.routing.module.ts with the following configuration: const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'login', component: LoginComponent }, { path: '', re ...

Showing information from Flask API utilizing Angular with underscores

I'm in the process of creating components from my Flask API. Upon accessing the route, I can view the data for the desired objects. However, upon attempting to display it on the front end through interpolation, I am only able to see certain properties ...

Tips on how to properly format a DateTime String

I need help with formatting a DateTime string retrieved from an API where it is in the format of YYYY-MM-DDTHH:MM:SS +08:00 and I want to change it to DD-MM-YY HH:MM getDataFromApi(res) { this.timestamp = this.timestamp.items[0].timestamp; console ...

Looking to incorporate Functional Components in React using the package "@types/react" version "^18.0.17"? Learn how here!

With the removal of the children prop from React.FC type, what is the new approach for typing components? ...

What is the C sharp version of this code structure?

I'm curious to know what the C# syntax is for declaring a property like this: filters: { [arg: string]: string }; ...

An error should not be thrown if the object is potentially 'undefined', as there is a filter in place from rxjs

During my service refactoring process, I encountered a frustrating issue. The API I am working with returns an object with various optional properties. To work with these properties, I need to check if they are undefined or not using an if statement, other ...

Adjust an IntervalObservable's interval by incorporating a variable

I've encountered an issue with a component that needs to run code at regular intervals without pausing. I'm currently using an IntervalObservable and need to adjust the interval dynamically. While I can change the variable value using the setTime ...

Promise rejection not handled: The play() function was unsuccessful as it requires the user to interact with the document beforehand

After upgrading my application from Angular 10 to 11, I encountered an error while running unit tests. The error causes the tests to terminate, but strangely, sometimes they run without any issues. Does anyone have suggestions on how to resolve this issue? ...

Using TypeScript arrow functions to define parameters

When setting "noImplicitAny": true in TypeScript, you may encounter the following errors: Parameter 'x' implicitly has an 'any' type This error can occur with the code snippet: .do(x => console.log(x)); Another error you might s ...

Leverage properties within the storybook component template

When utilizing a class component in a narrative, it allows you to transmit properties as arguments: const Template: Story<MyComponent> = (args) => ({ props: args, component: MyComponent, }) export const Default = Template.bind({}); export co ...

What are the steps for modifying the fields within the form?

The HTML code displays a table of todo items with options to delete or edit each entry. <tr *ngFor="let todo of todos; let i=index"> <td>{{ todo.name }}</td> <td>{{ todo.designation }}</td> <td>{{ todo.compa ...

Encountered an issue with Angular Material sidenav: The synthetic listener @transform.start was found

Click here to visit the StackBlitz link Encountering an issue while attempting to utilize the material side nav. Error message: preview-29b0f46fcc27b310236ab.js:1 ERROR Error: Uncaught (in promise): Error: Found the synthetic listener @transform.start. P ...

Issue with Angular 6.1.0: Scroll position restoration feature malfunctioning

RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' }) In the latest version 6.1.0, there is a new feature that aims to restore the scroll position after navigation. Unfortunately, I encountered an issue where the scroll restorat ...

The node command line does not recognize the term 'require'

My Typescript project was compiling and running smoothly until recently when I started encountering the error ReferenceError: require is not defined every time I try to run node. I am uncertain whether this issue stems from Typescript, as even when I ru ...

Ways to obtain the scrollWidth and offSetWidth of a div that is being utilized as an ngx-datatable-cell-template within an ngx-datatable

How can I retrieve the scrollWidth and offSetWidth of a div that is included in a child component being loaded as an ngx-datatable-cell-template inside ngx-datatable? I am consistently receiving values of 0. I have added a template variable for the div el ...

The type "AppRouterInstance" cannot be assigned to type "nextRouter"

Within my Next.js project, a registration form is included as seen below: "use client"; import * as React from "react"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form" ...

Strategies for Skipping Login Authentication (Okta) in Protractor for E2E Testing

With the recent addition of a login component to my app, I find myself in a situation where logging in is now essential to access the features. However, the login functionality is handled by an authentication service (okta) and not part of my own code. T ...

Eliminating the parent property name from the validation message of a nested object

When using @ValidateNested() with the class-validator library, I encountered a formatting issue when validating a nested object: // Object Schema: export class CreateServerSettingsDTO { @IsNotEmpty({ message: 'Username is required' }) usernam ...

Navigating through nested routes in Angular 5

I recently started learning about Angular, and I could really use some guidance on routing. Here is my current setup. app.component.html <router-outlet name="nav"></router-outlet> <router-outlet name="left-sidebar"></router-outlet> ...