Setup to read JSON objects into components

<!DOCTYPE html>
<html>

<head>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.0/router.dev.js"></script>
  <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('main.ts')
            .then(null, console.error.bind(console));
  </script>
</head>

<body>
  <my-app>Loading...</my-app>
</body>

</html>

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component.ts';

bootstrap(AppComponent);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import {Component} from 'angular2/core';
import {TestComponent} from './test.component.ts';
import {TestService} from './test.service.ts';

@Component({
  selector: 'my-app',
  template: `
    <test></test>
  `,
  styleUrls: [],
  providers: [TestService]
})

export class AppComponent {
}

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 => {
          this.testDetails = JSON.parse(testDetails);
        },
        errorMessage => {
          console.error("Something failed trying to get test details");
          console.error(errorMessage);
        }
      );
  }
}

<div class="content">
  <p> Test Details </p>
  <p> {{ testDetails.data.Random_Data_1 }} </p>
</div>

import { Injectable } from 'angular2/core';

@Injectable()
export class TestService {
  testString:string = "";
  testDetails: string = "";

  constructor() { }

  getTestDetails(): Promise<string> {
    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));
  }