JSON Tree View Basic HTML

data.html

<div class="container" id="vue-root">
  <div class="row">
    <div class="col-xs-12">
      <h1>A JSON Tree View Component in Vue.js</h1>      
    </div>  
  </div>

  <div class="row">
    <div class="col-xs-6">
      <pre><code>{{formatJSON(sampleData)}}</code></pre>
    </div>
    <div class="col-xs-6">[Tree View]</div>
  </div>
  
</div>

data.js

new Vue({
	el: "#vue-root", 
  methods: {
  	// return pretty-printed JSON
  	formatJSON: function(theJSON){
    	return JSON.stringify(theJSON, true, 2);
    }
  },
  data: function(){
  	return {
    	// Returns a JSON object with common
      // data structures, such as Arrays,
      // Objects and raw Values
    	sampleData: {"a":"b","c":[{"a":"b"},{"c":"d","e":"f"}],"d":{"a":"b","c":1234,"d":[1,"a",{"c":"d"}]},"g":null,"h":3.1415}
    }
  }
})