Angular 2 Example - QuickStart

import {Component, Pipe} from 'angular2/core';

@Pipe({
  name: 'prettyprint'
})
export class PrettyPrintPipe {
  transform(val) {
    return JSON.stringify(val, null, 2)
      .replace(/ /g, '&nbsp;')
      .replace(/\n/g, '<br/>');
  }
}

@Component({
	selector: 'my-app',
	templateUrl : './ui.html',
	styleUrls : ['./ui.css'],
	pipes: [ PrettyPrintPipe ]
// 	template: '<h1>My First Angular 2 App</h1><div *ngIf="invalidJson">Invalid JSON.. Please check JSON input</div><select [(ngModel)]="task"><option value="flat">Flatten</option><option value="unflat">Unflatten</option></select><textarea rows="20" cols="50" [(ngModel)]="data"></textarea><button (click)="goFlat()">Flatten</button><button (click)="go()">Unflatten</button>{{resultholder}}'
})
export class AppComponent { 
  resultholder;
  data;
  invalidJson=false;
  task;
  output =null;
  dataObject=null;
  
  go(){
    this.invalidJson=false;
    if(this.task !== undefined){
      try{
        this.dataObject = JSON.parse(this.data);
      } catch(e){
        this.invalidJson=true;
        return;
      }
      if(this.task === 'flat'){
        var flatObject = this.flat(this.dataObject);
        console.log("flat : ", flatObject);
        this.output = flatObject;
      }
      else if(this.task === 'unflat'){
        var unflatObject = this.unflat(this.dataObject);
        this.output = unflatObject;
        console.log(this.output);
      }
    }
    else{
      alert("Please select the task");
    }
  }
  
  public unflat(data) {
    "use strict";
    if (Object(data) !== data || Array.isArray(data))
        return data;
    var regex = /\.?([^.\[\]]+)|\[(\d+)\]/g,
    resultholder = [],
    numPatt = /^\d+$/;
    for (var p in data) {
      var cur = resultholder,
        prop = "",
        m;
      while (m = regex.exec(p)) {
        cur = cur[prop] || (cur[prop] = (numPatt.exec(m[1]) ? [] : {}));
        prop = m[2] || m[1];
      }
      cur[prop] = data[p];
        
    }
    console.log(resultholder[""]);
    return resultholder[""];
  }
  
  public flat(data) {
      var result = {};
      function recurse (cur, prop) {
          if (Object(cur) !== cur) {
              result[prop] = cur;
          } else if (Array.isArray(cur)) {
               for(var i=0, l=cur.length; i<l; i++)
                   recurse(cur[i], prop + "." + i + "");
              if (l == 0)
                  result[prop] = [];
          } else {
              var isEmpty = true;
              for (var p in cur) {
                  isEmpty = false;
                  recurse(cur[p], prop ? prop+"."+p : p);
              }
              if (isEmpty)
                  result[prop] = {};
          }
      }
      recurse(data, "");
      return result;
  }
}

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

bootstrap(AppComponent);

beforeEach(() => {
    jasmine.addMatchers({
        toContainText: function() {
            return {
                compare: function(actual: any, expectedText: string) {
                    var actualText = actual.textContent;
                    return {
                        pass: actualText.indexOf(expectedText) > -1,
                        get message() { return 'Expected ' + actualText + ' to contain ' + expectedText; }
                    };
                }
            };
        }
    });
});

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <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>

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

Copyright 2010-2015 Google, Inc. http://angularjs.org

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   [http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

<div class="demo-card-wide mdl-card mdl-shadow--2dp ">
  <div>
    <div class="mdl-card mdl-shadow--2dp heading-card">
      <h3 class="heading">Flatten - Unflatten JSON</h3>

    </div>
  </div>
  <br>
  <div *ngIf="invalidJson" class="invalid-json">
    Invalid JSON.. Please check JSON input
  </div>
  <div> Please select :
    <select [(ngModel)]="task" class="mdl-select__input">
      <option value="flat" selected>Flatten</option>
      <option value="unflat">Unflatten</option>
    </select>
  </div>
  <br>
  <textarea rows="20" cols="50" [(ngModel)]="data">
  </textarea>
  <!--div  *ngIf="dataObject!==null" [innerHTML]="dataObject | prettyprint"></div-->


  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="go()">
    GO!
  </button>
  <br>
  <div class="mdl-card mdl-shadow--2dp output-card">
    <div *ngIf="output!==null" [innerHTML]="output | prettyprint"></div>
  </div>
</div>

.heading{
 margin-left : 32px;
 font-weight: 600;
  }
.heading-card{
  min-height: 10px;
  width: 447px;

}
.demo-card-wide{
  padding:20px;
}
.demo-card-wide.mdl-card {
  width: 512px;
  margin-left : 50px;
}

.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}
.demo-card-event.mdl-card {
  width: 256px;
  height: 256px;
  background: #3E4EB8;
}
.demo-card-event > .mdl-card__actions {
  border-color: rgba(255, 255, 255, 0.2);
}
.demo-card-event > .mdl-card__title {
  align-items: flex-start;
}
.demo-card-event > .mdl-card__title > h4 {
  margin-top: 0;
}
.demo-card-event > .mdl-card__actions {
  display: flex;
  box-sizing:border-box;
  align-items: center;
}
.demo-card-event > .mdl-card__actions > .material-icons {
  padding-right: 10px;
}
.demo-card-event > .mdl-card__title,
.demo-card-event > .mdl-card__actions,
.demo-card-event > .mdl-card__actions > .mdl-button {
  color: #fff;
}

.mdl-select__input {
  border: none;
  border-bottom: 1px solid rgba(0,0,0, 0.12);
  display: inline-block;
  font-size: 16px;
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: 16px;
  text-align: left;
  color: inherit;
}
        
.invalid-json{
  margin-left : 45px;
  font-weight: 600;
  color : red;
}

.output-card{
  width: 512px;
}