martypdx/index.html

## index.html
<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>picky.json | Dump JSON. Click something. Get selector.</title>
    <meta name="description" content="Manually parsing JSON to get the selector you want is human error prone and just not much fun. picky.json lets you input raw JSON (or a URL that returns JSON) and then click on anything to get the selector you need quickly and easily!">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body>

    <header>
      <h1>
        <a href="http://github.com/corysimmons/picky.json" target="_blank">

          <span>picky.json</span>
        </a>
      </h1>
      <button class="btn-example">Load Example JSON</button>
    </header>

    <main>
      <textarea placeholder="Enter your valid JSON or JSON URL" wrap="off"></textarea>
      <div class="code-wrap">
        <div class="resize">
          <div class="holder"></div>
        </div>
        <div class="grab"></div>

		<pre><code class="json hljs"></code></pre>

      </div>
    </main>

    <script id="main" type="text/ractive">
      {{#if this.data && !this.loading}}
        <div class="outer-bracket">{{#if Array.isArray(this.data)}}[{{else}}{{'{'}}{{/if}}</div>{{>'recurse' this.data}}<div class="outer-bracket">{{#if Array.isArray(this.data)}}]{{else}}{{'}'}}{{/if}}</div>
      {{elseif this.loading}}
        Loading JSON from URL...
      {{/if}}
    </script>

    <script id="recurse" type="text/ractive">
      {{#if @key !== 'pickyCollapsed'}}
	  	{{#with this as context,
		  	    Array.isArray(this) as isArray,
		  	    ( Array.isArray(this) ? this.length : Object.keys(this).length ) as length
		}}
		{{#each context}}
          <div class="parent{{#if ~/collapsed.indexOf(@keypath) > -1 }} collapsed{{/if}}">
            {{#if typeof this === 'object'}}
              {{#if Array.isArray(this)}}
                <span class="hljs-attr{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">"{{@key}}"</span>:
                {{> 'array'}}
              {{else}}
                {{> 'object'}}
              {{/if}}
            {{else}}
              {{> 'attr'}}
              <span class="{{#if typeof this == 'string'}}hljs-string{{else}}hljs-number{{/if}} {{~/pickyIsSelected === @keypath ? 'is-selected' : ''}}" on-click="showPath:{{@keypath}}">{{#if typeof this == 'string'}}"{{this}}"{{else}}{{this}}{{/if}}</span>{{#if @index < this.length}},{{/if}}
            {{/if}}
          </div>
        {{/each}}
		{{/with}}
        <span class="empty">...</span>
      {{/if}}
    </script>

    <script id="array" type="text/ractive">
      <span class="hljs-wrap{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">[</span>
      <span class="collapsible" on-click="collapse">{{#if ~/collapsed.indexOf(@keypath) > -1 }}&#43;{{else}}&#45;{{/if}}</span>
        {{> 'recurse'}}
      <span class="hljs-wrap{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">]</span>{{#if @index < length }},{{/if}}
    </script>

    <script id="object" type="text/ractive">
      {{> 'attr'}}
      <span class="hljs-wrap{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">{</span><span class="collapsible" on-click="collapse">{{#if ~/collapsed.indexOf(@keypath) > -1 }}&#43;{{else}}&#45;{{/if}}</span>{{> 'recurse'}}<span class="hljs-wrap{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">}</span>{{#if @index < length }},{{/if}}
    </script>

    <script id="grab" type="text/ractive">
      <input id="picked" type="text" class="input" placeholder="Click something or type a selector" value="{{path}}" on-keyup="highlight:{{path}}"/>
      <button class="btn-clipboard" data-clipboard-target="#picked">Copy</button>
    </script>

    <script id="attr" type="text/ractive">
      {{#if isArray }}
        <span class="hljs-attr{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">"{{@key}}"</span>:
      {{/if}}
    </script>

    <div class="parse-field"></div>

    <script src="http://cdn.ractivejs.org/edge/ractive.js"></script>

    <script>
		'use strict';

		Ractive.DEBUG = true;

		// Adds the commas after the attributes in the JSON
		Ractive.defaults.data.pickyLengthCheck = function (keypath, index) {
			var items = this.get(keypath.replace(/\.[a-z\_0-9]*$/gi, ''));
			var length = Array.isArray(items) ? items.length : Object.keys(items).length;
			return index < length - 1;
		};

		Ractive.defaults.data.inArrayCheck = function (keypath, index) {
			return true; //!Array.isArray(this.get(keypath.replace(/\.[0-9]*$/, '')));
		};


		var main = new Ractive({
			el: '.json',
			template: '#main',
			data: {
				data: null,
				collapsed: [],
				pickyIsSelected: ''
			}
		});

		var request = new XMLHttpRequest();
		request.addEventListener( 'load', _ => {
    		var data = JSON.parse(request.responseText);
			console.time('ractive');
			// console.profile('ractive');
			main.set({ data, loading: false });
			// console.profileEnd('ractive');
			console.timeEnd('ractive');
		});
		// var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=San%20Francisco';
		var url = 'http://www.json-generator.com/api/json/get/bVQdOOYQCW?indent=2';

		request.open("GET", url);
		request.send();

	</script>
  </body>
</html>
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>picky.json \| Dump JSON. Click something. Get selector.</title>
	<meta name="description" content="Manually parsing JSON to get the selector you want is human error prone and just not much fun. picky.json lets you input raw JSON (or a URL that returns JSON) and then click on anything to get the selector you need quickly and easily!">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	</head>
	<body>

	<header>
	<h1>
	<a href="http://github.com/corysimmons/picky.json" target="_blank">

	<span>picky.json</span>
	</a>
	</h1>
	<button class="btn-example">Load Example JSON</button>
	</header>

	<main>
	<textarea placeholder="Enter your valid JSON or JSON URL" wrap="off"></textarea>
	<div class="code-wrap">
	<div class="resize">
	<div class="holder"></div>
	</div>
	<div class="grab"></div>

	<pre><code class="json hljs"></code></pre>

	</div>
	</main>

	<script id="main" type="text/ractive">
	{{#if this.data && !this.loading}}
	<div class="outer-bracket">{{#if Array.isArray(this.data)}}[{{else}}{{'{'}}{{/if}}</div>{{>'recurse' this.data}}<div class="outer-bracket">{{#if Array.isArray(this.data)}}]{{else}}{{'}'}}{{/if}}</div>
	{{elseif this.loading}}
	Loading JSON from URL...
	{{/if}}
	</script>

	<script id="recurse" type="text/ractive">
	{{#if @key !== 'pickyCollapsed'}}
	{{#with this as context,
	Array.isArray(this) as isArray,
	( Array.isArray(this) ? this.length : Object.keys(this).length ) as length
	}}
	{{#each context}}
	<div class="parent{{#if ~/collapsed.indexOf(@keypath) > -1 }} collapsed{{/if}}">
	{{#if typeof this === 'object'}}
	{{#if Array.isArray(this)}}
	<span class="hljs-attr{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">"{{@key}}"</span>:
	{{> 'array'}}
	{{else}}
	{{> 'object'}}
	{{/if}}
	{{else}}
	{{> 'attr'}}
	<span class="{{#if typeof this == 'string'}}hljs-string{{else}}hljs-number{{/if}} {{~/pickyIsSelected === @keypath ? 'is-selected' : ''}}" on-click="showPath:{{@keypath}}">{{#if typeof this == 'string'}}"{{this}}"{{else}}{{this}}{{/if}}</span>{{#if @index < this.length}},{{/if}}
	{{/if}}
	</div>
	{{/each}}
	{{/with}}
	<span class="empty">...</span>
	{{/if}}
	</script>

	<script id="array" type="text/ractive">
	<span class="hljs-wrap{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">[</span>
	<span class="collapsible" on-click="collapse">{{#if ~/collapsed.indexOf(@keypath) > -1 }}+{{else}}-{{/if}}</span>
	{{> 'recurse'}}
	<span class="hljs-wrap{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">]</span>{{#if @index < length }},{{/if}}
	</script>

	<script id="object" type="text/ractive">
	{{> 'attr'}}
	<span class="hljs-wrap{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">{</span><span class="collapsible" on-click="collapse">{{#if ~/collapsed.indexOf(@keypath) > -1 }}+{{else}}-{{/if}}</span>{{> 'recurse'}}<span class="hljs-wrap{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">}</span>{{#if @index < length }},{{/if}}
	</script>

	<script id="grab" type="text/ractive">
	<input id="picked" type="text" class="input" placeholder="Click something or type a selector" value="{{path}}" on-keyup="highlight:{{path}}"/>
	<button class="btn-clipboard" data-clipboard-target="#picked">Copy</button>
	</script>

	<script id="attr" type="text/ractive">
	{{#if isArray }}
	<span class="hljs-attr{{~/pickyIsSelected === @keypath ? ' is-selected' : ''}}" on-click="showPath:{{@keypath}}">"{{@key}}"</span>:
	{{/if}}
	</script>

	<div class="parse-field"></div>

	<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>

	<script>
	'use strict';

	Ractive.DEBUG = true;

	// Adds the commas after the attributes in the JSON
	Ractive.defaults.data.pickyLengthCheck = function (keypath, index) {
	var items = this.get(keypath.replace(/\.[a-z\_0-9]*$/gi, ''));
	var length = Array.isArray(items) ? items.length : Object.keys(items).length;
	return index < length - 1;
	};

	Ractive.defaults.data.inArrayCheck = function (keypath, index) {
	return true; //!Array.isArray(this.get(keypath.replace(/\.[0-9]*$/, '')));
	};


	var main = new Ractive({
	el: '.json',
	template: '#main',
	data: {
	data: null,
	collapsed: [],
	pickyIsSelected: ''
	}
	});

	var request = new XMLHttpRequest();
	request.addEventListener( 'load', _ => {
	var data = JSON.parse(request.responseText);
	console.time('ractive');
	// console.profile('ractive');
	main.set({ data, loading: false });
	// console.profileEnd('ractive');
	console.timeEnd('ractive');
	});
	// var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=San%20Francisco';
	var url = 'http://www.json-generator.com/api/json/get/bVQdOOYQCW?indent=2';

	request.open("GET", url);
	request.send();

	</script>
	</body>
	</html>