title: Parsing JSON Data working only for template(HTML) but not for Component Class(Typescript)
body: <p>I would like to parse a <em>json</em> file to use, and extract data.</p>
  
  <p>I don't know why the data extracted from my code work only for my html, but is empty for my typescript code... </p>
  
  <p>json file to parse : </p>
  
  <pre><code>[
    {
      "appleWatch": "generation_3",
      "bracelets": ["model_1","model_2","model_3"]
    },
    {
      "appleWatch": "generation_4",
      "bracelets": ["model_1","model_4","model_5"]
    }
  ]
  </code></pre>
  
  <p>Typescript of my component:</p>
  
  <pre><code>export class AppleKitComponent implements OnInit {
    constructor(private httpService: HttpClient) {}
  
    arrAppleWatch: AppleWatchModel[] = [];
    selectedWatch: AppleWatchModel = null;
    url = '../../assets/json/appleKit.json';
  
    ngOnInit() {
      this.arrAppleWatch = this.parseAppleWatchData();
      console.log(this.arrAppleWatch.toString() + 'test');
    }
  
    parseAppleWatchData() {
      this.httpService.get('../../assets/json/appleKit.json').subscribe(
        data =&gt; {
          this.arrAppleWatch = data as AppleWatchModel[]; // FILL THE ARRAY WITH DATA.
        },
        (err: HttpErrorResponse) =&gt; {
          console.log(err.message);
        }
      );
      return this.arrAppleWatch;
    }
  }
  </code></pre>
  
  <p>My appleWatch model : </p>
  
  <pre><code>export class AppleWatchModel {
    constructor(
      public watch: string,
      public bracelets?: string[],
      public bracelet?: string
    ) {
    }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>{{arrAppleWatch |json }}
  </code></pre>
  
  <p><strong>My log should output :</strong> </p>
  
  <p><code>[ { "appleWatch": "generation_3", "bracelets": [ "model_1", "model_2", "model_3" ] }, { "appleWatch": "generation_4", "bracelets": [ "model_1", "model_4", "model_5" ] } ]</code></p>
  
  <p>but it just prints an empty string.</p>
  
  <p>My html work and show the array : </p>
  
  <pre><code>[ { "appleWatch": "generation_3", "bracelets": [ "model_1", "model_2", "model_3" ] }, { "appleWatch": "generation_4", "bracelets": [ "model_1", "model_4", "model_5" ] } ]
  </code></pre>