title: Angular 2 - Using/displaying JSON data fetched through HTTP, or mocked
body: <p>I'm working on an Angular 2 application, and I'm trying to use JSON data, either local/mocked or fetched via HTTP, and display it on a component. I have an injectable service that will do the fetching/mocking - </p>
  
  <pre><code>import { Injectable } from 'angular2/core';
  
  @Injectable()
  export class TestService {
    testString:string = "";
    testDetails: string = "";
  
    constructor() { }
  
    getTestDetails(): Promise&lt;string&gt; {
      this.testDetails = {
        "status": "success",
        "message": "Data save successful",
        "data": {
          "Random_Data_1": "Random Data 1",
          "Random_Data_2": "Random Data 2"
        }
      };
      return Promise.resolve(JSON.stringify(this.propertyDetails));
    }
  }
  </code></pre>
  
  <p>And then I have a component that uses the service via Dependency Injection - </p>
  
  <pre><code>import { Component, OnInit } from 'angular2/core';
  import {TestService} from "./test.service";
  
  @Component({
    selector: 'test',
    templateUrl: './test.component.html',
    styleUrls: []
  })
  export class TestComponent implements OnInit {
    testDetails: string = "";
  
    constructor(private testService: TestService) { }
  
    ngOnInit() {
      this.display();
    }
  
    display(): void {
      this.testService.getTestDetails()
        .then(
          testDetails =&gt; {
            this.testDetails = JSON.parse(testDetails);
          },
          errorMessage =&gt; {
            console.error("Something failed trying to get test details");
            console.error(errorMessage);
          }
        );
    }
  }
  </code></pre>
  
  <p>The component HTML - </p>
  
  <pre><code>&lt;div class="content"&gt;
    &lt;p&gt; Test Details &lt;/p&gt;
    &lt;p&gt; {{ testDetails.data.Random_Data_1 }} &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is, the HTML is erroring out trying to display the items in the testDetails JSON. I initially used it with md-tabs, so the first try would error out, but the other tabs would read the data fine. Also, the ngOnInit would be called twice when the error occurs. I have narrowed it down to the data coming in and the object types that is causing me the headache.</p>
  
  <p>I know I can create a Details class and declare testDetails of type Details, and then map the JSON data into the class, but the thing is, I want to work with generic data, and only know a few components that will be present in the data. Is there a way to read the JSON, and use the data without having to define a separate class for each scenario ?</p>
  
  <p>I have a plunker with the most basic stuff set up. The actual setup runs fine on my local system up until where I try to access the JSON data in the HTML, at which point the browser throws a cryptic error. The skeleton code doesn't even run on Plunker. That said, the structure in the Plunker defines the structure of my app and the data flow. <a href="http://embed.plnkr.co/lkpdl9j2HwGigXa5mXHV/" rel="nofollow noreferrer">Plunker with the basic setup</a></p>
  
  <p>What is the best way to achieve this ? What is the standard/best practice to do this ?</p>