jmvtrinidad/app.html

## app.html
<template>
  <h1>${message}</h1>
  <input type="text" ref="json"/>
  <button click.delegate="generate(json.value)">Generate</button>
  <button click.delegate="selectElementContents(table)">select</button>
  <table ref="table">
    <tbody repeat.for="row of rows">
      <tr>
        <td>${row.name}</td>
        <td>${row.type}</td>
      </tr>
    </tbody>
  </table>
</template>

## app.js
export class App {
  message = 'Hello World!';
  rows = []
  generate(json) {
    this.rows = this.generateTypes(json)
  }

  generateTypes(json) {
    let rows = []
    let objectRows = []
    let o = typeof(json) == "object"
              ? json
              : JSON.parse(json)
    for(let prop in o) {
      let type = typeof(o[prop])
      let value = o[prop]
      if(Array.isArray(value)) {
        debugger
        if(!value[0]) {
          rows.push({
            name: `parent object list: ${prop}`,
            value: value,
            type: 'array of objects'
          })
          continue
        } else if(typeof(value[0]) == 'string') {
          rows.push({
            name: `parent object list: ${prop}`,
            value: value,
            type: 'array of string'
          })
          continue
        }
        let childRows = this.generateTypes(value[0])
        childRows.unshift({
          name: `parent object list: ${prop}`,
          value: value,
          type: 'array of objects'
        })
        objectRows = objectRows.concat(childRows)
      } else if(value == null) {
        rows.push({
          name: `${prop}`,
          value: value,
          type: type
        })
      } else if(type == "object") {
        let childRows = this.generateTypes(value)
        childRows.unshift({
          name: `parent object: ${prop}`,
          value: value,
          type: type
        })
        objectRows = objectRows.concat(childRows)
      } else {
        rows.push({
          name: prop,
          value: value,
          type: type
        })
      }
    }

    rows = rows.concat(objectRows)
    return rows
  }

  selectElementContents(el) {
    var body = document.body, range, sel;
    if (document.createRange && window.getSelection) {
        range = document.createRange();
        sel = window.getSelection();
        sel.removeAllRanges();
        try {
            range.selectNodeContents(el);
            sel.addRange(range);
        } catch (e) {
            range.selectNode(el);
            sel.addRange(range);
        }
    } else if (body.createTextRange) {
        range = body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
  }

}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>
	<template>
	<h1>${message}</h1>
	<input type="text" ref="json"/>
	<button click.delegate="generate(json.value)">Generate</button>
	<button click.delegate="selectElementContents(table)">select</button>
	<table ref="table">
	<tbody repeat.for="row of rows">
	<tr>
	<td>${row.name}</td>
	<td>${row.type}</td>
	</tr>
	</tbody>
	</table>
	</template>
	export class App {
	message = 'Hello World!';
	rows = []
	generate(json) {
	this.rows = this.generateTypes(json)
	}

	generateTypes(json) {
	let rows = []
	let objectRows = []
	let o = typeof(json) == "object"
	? json
	: JSON.parse(json)
	for(let prop in o) {
	let type = typeof(o[prop])
	let value = o[prop]
	if(Array.isArray(value)) {
	debugger
	if(!value[0]) {
	rows.push({
	name: `parent object list: ${prop}`,
	value: value,
	type: 'array of objects'
	})
	continue
	} else if(typeof(value[0]) == 'string') {
	rows.push({
	name: `parent object list: ${prop}`,
	value: value,
	type: 'array of string'
	})
	continue
	}
	let childRows = this.generateTypes(value[0])
	childRows.unshift({
	name: `parent object list: ${prop}`,
	value: value,
	type: 'array of objects'
	})
	objectRows = objectRows.concat(childRows)
	} else if(value == null) {
	rows.push({
	name: `${prop}`,
	value: value,
	type: type
	})
	} else if(type == "object") {
	let childRows = this.generateTypes(value)
	childRows.unshift({
	name: `parent object: ${prop}`,
	value: value,
	type: type
	})
	objectRows = objectRows.concat(childRows)
	} else {
	rows.push({
	name: prop,
	value: value,
	type: type
	})
	}
	}

	rows = rows.concat(objectRows)
	return rows
	}

	selectElementContents(el) {
	var body = document.body, range, sel;
	if (document.createRange && window.getSelection) {
	range = document.createRange();
	sel = window.getSelection();
	sel.removeAllRanges();
	try {
	range.selectNodeContents(el);
	sel.addRange(range);
	} catch (e) {
	range.selectNode(el);
	sel.addRange(range);
	}
	} else if (body.createTextRange) {
	range = body.createTextRange();
	range.moveToElementText(el);
	range.select();
	}
	}

	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>