CODEWITHSUNDEEP
angularangular5
andrea2010
andrea2010

Reputation: 338

Angular, ERROR TypeError: items.filter is not a function

I have such an error in the browser console:

ERROR Error: Uncaught (in promise): TypeError: items.filter is not a function
TypeError: items.filter is not a function
at FilterByFieldPipe.push../src/app/pipes/filter-by-field.ts.FilterByFieldPipe.transform (filter-by-field.ts:11)
at TaskListComponent.push../src/app/components/tasks/list.ts.TaskListComponent.refreshPipes (list.ts:139)
at TaskListComponent.push../src/app/components/tasks/list.ts.TaskListComponent.refreshTasks (list.ts:129)
at list.ts:29
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3654)
........

From this file.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterByField',
  pure: false
})

export class FilterByFieldPipe implements PipeTransform {
  transform(items, key, value) {
    if (items) {
      return items.filter((item) => item[key] === value);
    }
  }
}

Elements are created, I can see them, the problem is that they are not output all together.

This is the model file:

app.module.ts

import { BrowserModule }              from '@angular/platform-browser';
import { NgModule }                   from '@angular/core';
import {
ReactiveFormsModule,
FormsModule,
FormBuilder,
FormGroup,
Validators
}                                     from '@angular/forms';
import { HttpModule }                 from '@angular/http';
import { environment }                from '../environments/environment';
import { APP_CONFIG, appConfig }      from './app.config';
import { AppRoutingModule }           from './app.routes';
import { AuthService }                from './services/auth';
import { TaskService }                from './services/task';
import { AppComponent }               from './components/app';
import { LoginComponent }             from './components/login';
import { NavbarComponent }            from './components/navbar';
import { InlineEditComponent }        from './components/inline-edit';
import { RegistrationComponent }      from './components/registration';
import { ConfirmEmailComponent }      from './components/confirm-email';
import { AdminComponent }             from './components/admin';
import { TasksComponent }             from './components/tasks';
import { TaskListComponent }          from './components/tasks/list';
import { TaskFormComponent }          from './components/tasks/form';
import { TasksDetailComponent }       from './components/tasks/detail';
import { TasksDetailInlineComponent } from './components/tasks/detail-inline';
import { TaskEditComponent }          from './components/tasks/edit';
import { SimpleNotificationsModule }  from 'angular2-notifications';
import { MyDatePickerModule }         from 'mydatepicker';
// import { NgbModule }                  from '@ng-bootstrap/ng-        bootstrap';
import './rxjs-extensions';
import { BrowserAnimationsModule }    from '@angular/platform-browser/animations';


@NgModule({
declarations: [
AppComponent,
LoginComponent,
RegistrationComponent,
ConfirmEmailComponent,
NavbarComponent,
AdminComponent,
TasksComponent,
TaskListComponent,
TaskFormComponent,
TasksDetailComponent,
TasksDetailInlineComponent,
InlineEditComponent,
TaskEditComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
FormsModule,
HttpModule,
AppRoutingModule,
SimpleNotificationsModule.forRoot(),
BrowserAnimationsModule,
MyDatePickerModule/*,
NgbModule.forRoot()*/
],
providers: [
AuthService,
TaskService,
FormBuilder,
Validators,
{ provide: APP_CONFIG, useFactory: appConfig }
],
bootstrap: [ AppComponent ]
})

export class AppModule {}

Upvotes: 1

Views: 7747

Answers (1)

Adrian Sawicki
Adrian Sawicki

Reputation: 708

In your if statement add a check if items are equal to the array. Without it, you will get error messages when you use your pipe on the wrong type of data.

You can do it by comparing items.constructor === Array or just add items: array<any>.

I would suggest you upgrade version of your project. Many answers which you look for or will be looking for might not work for you just because of so old version of the project.

Upvotes: 1

Related Questions