filter(...).toArray is not a function

Question

I am trying try to filter the results of a subscription. I get a List from the service class (job.service), and so I filter it, however filter returns an Iterable not List or Array. So I use toArray() but at runtime it throws an error saying "result.filter(...).toArray is not a function".

Could someone explain what is happening and give me a solution?

import { Component, Input, OnInit } from "@angular/core";
import { Http, Response, Headers, RequestOptions, RequestMethod, Request } from "@angular/http";
import { JobBase,JobMore, Employee, WorkCategory, TimeEntryApi } from "./models";
import { JobService } from "./job.service";
import { EmployeeService } from "./employee.service";
import { WorkCategoryService } from "./workcategories.service";
import { Observable } from "rxjs/Observable";
import { List } from "immutable";
import "rxjs/add/operator/debounceTime";
import "rxjs/add/operator/distinctUntilChanged";
import "rxjs/add/operator/map";
import { NgbModal, NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
dummy: Array<JobMore> = [];
getJobs(): void {
    this.jobServ.GetJobs().subscribe(
        result => this.dummy = result.filter(x => x.status > 9).toArray(),
        error => console.error,
        () => console.log('completed function here or remove '));

    this.Submitted = this.dummy.length.toString();

}

job service

import { Component, Injectable } from "@angular/core";
import { Http, Response, Headers, RequestOptions, RequestMethod, Request } from "@angular/http";
import { JobBase, JobMore } from "./models";
import { Observable } from "rxjs/Observable";
import { BehaviorSubject } from "rxjs";
import { List } from "immutable";
import "rxjs/add/operator/debounceTime";
import "rxjs/add/operator/distinctUntilChanged";
import "rxjs/add/operator/map";
@Injectable()
export class JobService {

    public jobs: List<JobMore>;

    constructor(public http: Http) {
        this.GetJobs();
    }

    GetJobs(): Observable<List<JobMore>>{
        return this.http.get('./api/job')
            .map(this.JobsResponseMapper);

    }

    JobsResponseMapper(response: Response) {
        this.jobs = response.json();
        return this.jobs;
    }

}

Model

export class JobMore {
    constructor(
        public id: number,
        public jobName: string,
        public jobNumber: number,
        public status: number,
    ) { }
}

ETA:

I've now tried result => Array.from(result.filter(x => x.status > 9)) I get the following error "Argument of type

Iterable' is not assignable to parameter of type 'Iterable<{}>'. Property '[Symbol.iterator]' is missing in type 'Iterable'.

ETA2:

I have now tried this, with "this.dummy" inside the Array.from. this syntax doesn't make any sense to me though. dummy is the array and Array.fromshould be converting a list to an array and returning it. which should then be assigned to dummy. Wouldn't that make sense?

getJobs(): void {
    this.jobServ.GetJobs().subscribe(
        result => {
            Array.from(this.dummy = result.filter(x => x.status > 9)),
            error => console.error,
            () => console.log('jobs loaded: ' + this.jobs.length)
        });
}

I have also tired it this way. with the same error

getJobs(): void {
    this.jobServ.GetJobs().subscribe(
        result => {
            this.dummy = Array.from(result.filter(x => x.status > 9)),
            error => console.error,
            () => console.log('jobs loaded: ' + this.jobs.length)
        });
}

Iterable' is not assignable to parameter of type 'Iterable<{}>'. Property '[Symbol.iterator]' is missing in type 'Iterable'.

job.service

GetJobs() {
    return this.http.get('./api/job')
        .map(this.JobsResponseMapper);

}

Answer 1

I'm a bit unsure as to why you are assigning the incoming data as List in your Service if that is exactly NOT what you want?? Try and remove the Observable from your GetJobs()-method like so:

GetJobs() {
    return this.http.get('./api/job')
        .map(this.JobsResponseMapper);

}

But to as your question, try Array.from instead and a couple of brackets:

getJobs(): void {
    this.jobServ.GetJobs().subscribe(
        result => {
            Array.from(this.dummy = result.filter(x => x.status > 9)),
            error => console.error,
            () => console.log('completed function here or remove ')
            this.Submitted = this.dummy.length.toString();
        });
}