There was a TypeError encountered when trying to access the property 'Symbol(Symbol.iterator)' of an undefined variable

Whenever a web service request fails, this exception is thrown:

TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

Specifically, the HTTP GET request returns a 400 Bad Request error.

Below is the component involved in this issue:

@Component({
    selector: 'events-list',
    directives: [EventRow],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [HTTP_PROVIDERS],
    template: `
<table>
    <tr *ngFor="let event of events | async" [event]="event" >
    </tr>
</table>
  `
})
export class EventsList implements OnInit {
    events: Observable<Event[]>;

    constructor(public http: Http) { }

    ngOnInit(): void {
        let obs;
        this.events = Observable
            .create((o) => {
                obs = o;
                obs.next();
            })
            .flatMap(() => {
                return this.http.get('event/view');
            })
            .retryWhen(error => {
                error.delay(3000);
            })
            .map((response: Response) => {
                setTimeout(() => {
                    obs.next();
                }, 10000);
                return (<any>response.json()).map(item => {
                    return item;
                });
            });
    }
}

Any suggestions on how to address this issue?

Thank you in advance!

Answer №1

It appears that a return statement was omitted in the retryWhen block:

.retryWhen(error => {
  return error.delay(3000);
})

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

The typescript error "Cannot read properties of undefined" is encountered while trying to access the 'map' function

I was attempting to follow a guide on creating an app using typescript and react, but I'm encountering an error that says "Cannot read properties of undefined (reading 'map')". I'm not sure why this is happening, can someone please offe ...

What triggers Angular's Change Detection mechanism when binding to a function?

After reading these two informative articles: Exploring the mechanics of DOM updates in Angular Is it more efficient to bind with a data member than a function in Angular 2 Performance? I have a good understanding of how the DOM is updated when 'C ...

An issue has occurred: [ERR_REQUIRE_ESM] You must utilize the import statement in order to load an

These are the snippets of code I'm working with: index.ts import { MikroORM } from "@mikro-orm/core" import { __prod__ } from "./constants"; import { Post } from "./entities/Post"; import microConfig from "./mikro-o ...

Should ts-node be avoided in a production environment due to potential risks?

My current setup involves using ts-node with express in production and so far, it's been functioning smoothly. Am I missing out on any benefits by not compiling and running .js files instead? ...

Encountering a ReferrenceError when utilizing jQuery with TypeScript

After transitioning from using JavaScript to TypeScript, I found myself reluctant to abandon jQuery. In my search for guidance on how to integrate the two, I came across several informative websites. Working with Visual Studio 2012, here is my initial atte ...

Exploring the power of chaining multiple subscriptions in RxJs 6

I have a project using Angular 6, and I'm currently in the process of upgrading rxjs to version 6. In the previous iteration of my app, there was a specific flow where I needed to make sequential calls to observables: 1. Call an observable 2. Perfor ...

Looking to update properties for elements within the Angular Material 16 mat-menu across the board?

Currently working with Angular Material 16 and I have a question regarding the height of buttons inside the mat-menu element. Here is an example of the code: <button mat-icon-button> <mat-icon>more_vert</mat-icon> </button> ...

The enigma of Angular Change Detection: Unraveling the relationship between child events and parent

I am striving to find a way to avoid triggering Change Detection in ancestor or parent components when a DOM click event is detected in a child component. It seems that this may not be achievable, as ancestors or parents of the child component will always ...

AngularFire UPDATE -> APPLY CHANGES

I can't seem to figure this out. I'm wondering how to UPDATE a document that is returned in the WHERE clause using AngularFire: constructor(private db: AngularFirestore) { } var path = this.db.collection('users').doc('type') ...

Encountering "SyntaxError:" due to an unexpected token in the JSON data at the beginning while trying to parse with JSON.parse

Encountering a "SyntaxError:" Unexpected token in JSON at position 0 when fetching compressed data from backend Spring Boot in Angular 7 On the backend, I am compressing a list of objects using the following structure: ArticleObj.java public class Articl ...

Setting default parameters for TypeScript generics

Let's say I define a function like this: const myFunc = <T, > (data: T) => { return data?.map((d) => ({name: d.name}) } The TypeScript compiler throws an error saying: Property 'name' does not exist on type 'T', whic ...

Launching a MEAN stack application on Heroku

My current challenge involves deploying an application I have developed using the MEAN stack on Heroku. The issue seems to be related to the structure of my application. All server-side code is contained in a directory named 'server', which inclu ...

Oops! The program encountered an error where it cannot assign a value to the 'id' property of an undefined object while trying to store a session in redis

I am currently working on an Angular4 login application and I am looking to store sessions in Redis. To accomplish this, I am utilizing Express session. However, I have encountered the following error: req.session.id = userName; ...

Issue encountered while utilizing an observable object within a FormGroup

I've encountered an issue that I can't seem to resolve. I have a function that is responsible for creating my FormGroup along with the form fields and validators. The validators are custom validators that require a value from an observable, and t ...

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.ne ...

Create a typescript class object

My journey with Typescript is just beginning as I delve into using it alongside Ionic. Coming from a background in Java, I'm finding the syntax and approach quite different and challenging. One area that's giving me trouble is creating new object ...

Exploring the distinctions among different material design frameworks

Confirming my grasp of the situation here. Material design is an interface building approach developed by Google. Material lite is Google's public implementation of this concept. serves as an independent open-source adaptation. In addition, Angul ...

What could be causing my customer directive to malfunction?

My main goal is to dynamically display different pages based on whether the user is logged in or logged out <!-- Display this for logged out users --> <ul *appShowAuthed="false" class="nav navbar-nav pull-xs-right&qu ...

Converting an Observable variable to a specific type in Typescript

I am currently utilizing Angular 12. To avoid duplicating the same service logic, I am experimenting with creating a base class that includes all HTTP methods and then extending a child class to utilize in the components. crud.service.ts @Injectable({ ...

The string property I pass to the List component with the flexDirection style is meant to be implemented, but unfortunately, an error occurs

When passing a string property ("raw" | "column") to the List component which has a flexDirection style property, I encounter an error: Type '{ direction: String; }' is not assignable to type 'FlexDirection | undefined'. 7 | ...