Type showing up as undefined in service in Typescript

Question

I want to split a string into json format on my front end, however im facing type mismatches between my service and component.

The array im receiving looks something like this:

0:Active,1:Logged In,2:Password tries exceeded,3:Force password change,4:Expired,5:Disabled

I am separating the array successfully as found in my console logs, however when I want to set them into my dual matrix array they are being mismatched or appear as undefined.

Service.ts

import 'rxjs/add/observable/from';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions } from '@angular/http';
import { UpdateGroup } from '../_models/updateGroup';


@Injectable()
export class StatusService {

    private splitList : String[];
    //parsedList : {id: String, name: String}[];
    private parsedList : String[][];
    constructor(private http: Http) {

    }

    parseList(toParse : String): String[][] {
        var fieldCount = Number.parseInt(toParse.substr(0, 1));
        toParse = toParse.substr(1);
        this.splitList = toParse.split(/(?::|,)/);
        console.log("Found string " + toParse);
        console.log("Field count is " + fieldCount);
        console.log("splitList length is " + this.splitList.length);

        for (let index = 0; index < this.splitList.length; index++) {
            console.log(this.splitList[index]);         
        }

        console.log("new length is " + this.splitList.length/fieldCount);
        this.parsedList = String[this.splitList.length/fieldCount][fieldCount]; //does not work


        for (let i = 0; i < this.splitList.length; i+=fieldCount) {
            for(let j = 0; j < fieldCount; j++)
                this.parsedList[i/fieldCount][j] = this.splitList[i+j];          
        }

        return this.parsedList;
      }
}

Component.ts

import { StatusService } from './../../../../_services/status.service';


@Component({
  selector: 'update-form',
  templateUrl: './updateForm.html',
})

export class UpdateFormComponent implements OnInit {

  public statusList: String[][];
  public groupList: String[][];

  constructor(private http: Http, fb: FormBuilder, protected service: UpdateUserService,
    private statusService: StatusService,
    protected router: Router,
    private _location: Location,
  ) {}


ngOnInit() {

    this.formService.myUser.filter(user => user !== null)
      .subscribe(user => {

        this.statusList = this.statusService.parseList(this.myUser.STATUS_LIST);
        this.groupList = this.statusService.parseList(this.myUser.GROUP_LIST);

      });


  }
}

The error im getting is related to the service and the component, for some reason it cannot read the array to set it in the service

ERROR TypeError: Cannot read property '2' of undefined at StatusService.push../src/app/_services/status.service.ts.StatusService.parseList (status.service.ts:39) at SafeSubscriber._next (updateForm.component.ts:162) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:253) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:191) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:129) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:85) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93) at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:53) at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/BehaviorSubject.js.BehaviorSubject.next (BehaviorSubject.js:42)

user184994 user184994 · Accepted Answer · 2018-06-09T02:25:14

In typescript, = is for assignment, not specifying a type.

When you do:

this.parsedList = String[this.splitList.length/fieldCount][fieldCount]

That is trying to assign a value to this.parsedList, but it fails as there is no variable called String (as that is a type, not a value).

Instead, as arrays are dynamically sized in js / typescript, you can just assign it like so:

this.parsedList = [];

That will create a 1d array. Then in your loop, you can do:

for (let i = 0; i < this.splitList.length; i+=fieldCount) {
    this.parsedList[i/fieldCount] = []; // Assign an array to make it a 2d array
    for(let j = 0; j < fieldCount; j++)
        this.parsedList[i/fieldCount][j] = this.splitList[i+j];          
}

Type showing up as undefined in service in Typescript

1 Answers