title: "Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined"
body: <p>Could anyone help with the error </p>
  
  <pre><code>"Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
  
  TypeError: Cannot read property 'length' of undefined
      at SomeComponent.webpackJsonp.805.SomeComponent.getBList (http://localhost:4200/1.chunk.js:23613:34)
      at SomeComponent.webpackJsonp.805.SomeComponent.ngOnInit (http://localhost:4200/1.chunk.js:23610:14)
      at checkAndUpdateDirectiveInline (http://localhost:4200/vendor.bundle.js:11957:19)
      at checkAndUpdateNodeInline (http://localhost:4200/vendor.bundle.js:13336:17)
      at checkAndUpdateNode (http://localhost:4200/vendor.bundle.js:13304:16)
      at debugCheckAndUpdateNode (http://localhost:4200/vendor.bundle.js:13933:59)
      at debugCheckDirectivesFn (http://localhost:4200/vendor.bundle.js:13874:13)
      at Object.eval [as updateDirectives] (ng:///SeasonPageModule/SeasonPageComponent_Host.ngfactory.js:16:5)
      at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:4200/vendor.bundle.js:13859:21)
      at checkAndUpdateView (http://localhost:4200/vendor.bundle.js:13271:14)
      at callWithDebugContext (http://localhost:4200/vendor.bundle.js:14259:42)
      at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:4200/vendor.bundle.js:13799:12)
      at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:11368:63)
      at RouterOutlet.activateWith (http://localhost:4200/vendor.bundle.js:32580:42)
      at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:31760:16)
      at ZoneAwareError (http://localhost:4200/vendor.bundle.js:95038:33)
      at resolvePromise (http://localhost:4200/vendor.bundle.js:94728:31)
      at resolvePromise (http://localhost:4200/vendor.bundle.js:94713:17)
      at http://localhost:4200/vendor.bundle.js:94762:17
      at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:94502:35)
      at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:5362:37)
      at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:94501:40)
      at Zone.runTask (http://localhost:4200/vendor.bundle.js:94378:47)
      at drainMicroTaskQueue (http://localhost:4200/vendor.bundle.js:94660:35)"
  </code></pre>
  
  <p>I am trying to get the values of an inner array from a json file to a variable that I have created.
  My json file is in the following format.</p>
  
  <pre><code>JSON filename: file.json
      {
        "A":[
          {
            "id": "123",
            "title": "title of A",
            "type": "asf",
            "B": [
              {
                "id": "1",
                "title": "title1"
              },
              {
                "id": "2",
                "title": "title2"
              }
            ]
        ]
      }
  </code></pre>
  
  <p>I have created couple of models to store the values</p>
  
  <pre><code>A.model.ts
  import {B} from './b.model';
  
  export interface A {
  
      type?;
  
      id?;
  
      title?;
  
      b?: B[];
  
  }
  
  B.model.ts
  export interface B {
  
      id?;
  
      title?;
  
  }
  </code></pre>
  
  <p>My Service that returns the json has the following</p>
  
  <pre><code>someService.service.ts
  
  import {A} from '../model/a.model';
  constructor(private _http: Http, private _authService: AuthService) {}
  
    get() {
      return this._http.get('app/file.json')
                      .toPromise()
                      .then(res =&gt; &lt;A[]&gt; res.json().showList)
                      .then(A =&gt; { return A; });
    }
  </code></pre>
  
  <p>In the component.ts I have written the following code.</p>
  
  <pre><code>&lt;somename&gt;.component.ts
  
  import { Component, OnInit } from '@angular/core';
  import { Routes, Router } from '@angular/router';
  import {Observable} from 'rxjs';
  
  import {A} from '../../shared/model/a.model';
  import {SomeService} from '../../shared/service/someService.service';
  import {B} from '../../shared/model/b.model';
  import {Location} from '@angular/common';
  
  class AList implements A {
    constructor(public title?, public id?, public type?, public bList?: B[]) {}
  }
  class BList implements B {
    constructor(public title?, public id?) {}
  }
  
  @Component({
    selector: 'ms-season-page',
    styleUrls: [],
    template: require('./season-page.component.html')
  })
  export class SomeComponent implements OnInit {
  
    b: B = new BList();
  
    bArray: B[] = [];
  
    aArray: A[];
  
    constructor(private router: Router, private someService: SomeService) {
    }
  
    ngOnInit() {
      this.someService.get().then(a =&gt; this.aArray = a);
      this.bArray = this.getBList(this.aArray);
    }
  
    getBList(aArray: AList[]): B[] {
      let bList: B[] = [];
      for(let j=0; j&lt;aArray.length; j++) {
          for (let i=0; i&lt;aArray[j].seasonList.length; i++) {
            let b = new BList(aArray[j].B[i].title, aArray[j].B[i].id);
            bList.push(b);
          }
      }
      return bList;
    }
  }
  </code></pre>
  
  <p>Can anyone help me telling what mistake I am doing? Or is there a way to get the 'B' array values.</p>
  
  <p>Thanks in advance.</p>