| <!DOCTYPE html> |
| <html> |
| <head> |
| <title> JSONSelect </title> |
| <link href='css/droid_sans.css' rel='stylesheet' type='text/css'> |
| <link href='css/style.css' type='text/css' rel='stylesheet'> |
| </head> |
| <body> |
| <div id="header"> |
| <div class="content"> |
| <div class="title">json<b>:</b>select<b>()</b></div> |
| <div class="nav"> <a href="#overview">Overview</a> | <a href="#tryit">Try It!</a> | <a href="#docs">Docs</a> | <a href="#code">Code</a> | <a href="mailto:jsonselect@librelist.com">Contact</a> | <a href="#cred">Credit</a> </div> |
| <div class="subtitle">CSS-like selectors for JSON.</div> |
| </div> |
| </div> |
| <div id="main"> |
| <div style="display: none" id="splash" class="content"> |
| <div class="sample json"> |
| <tt>".author .drinkPref :first-child"</tt> |
| <pre>{ |
| "author": { |
| "name": { |
| "first": "Lloyd", |
| "last": "Hilaiel" |
| }, |
| "drinkPref": [ |
| <span class="selected">"whiskey"</span>, |
| "beer", |
| "wine" |
| ], |
| }, |
| "thing": "JSONSelect site", |
| "license": "<a href="http://creativecommons.org/licenses/by-sa/3.0/us/">(cc) BY-SA</a>" |
| }</pre></div> |
| <div class="pitch"> |
| <p>JSONSelect is an <i>experimental</i> selector language for JSON.</p> |
| <p>It makes it easy to access data in complex JSON documents.</p> |
| <p>It <i>feels like</i> CSS.</p> |
| <p>Why not <a href="#tryit">give it a try</a>? |
| </div> |
| </div> |
| <div id="tryit" style="display: none" class="content"> |
| <div class="current"> Current Selector (click to edit): <input type="text"></input><span class="results"></span></div> |
| <pre class="doc json"> |
| { |
| "name": { |
| "first": "Lloyd", |
| "last": "Hilaiel" |
| }, |
| "favoriteColor": "yellow", |
| "languagesSpoken": [ |
| { |
| "lang": "Bulgarian", |
| "level": "advanced" |
| }, |
| { |
| "lang": "English", |
| "level": "native", |
| "preferred": true |
| }, |
| { |
| "lang": "Spanish", |
| "level": "beginner" |
| } |
| ], |
| "seatingPreference": [ |
| "window", |
| "aisle" |
| ], |
| "drinkPreference": [ |
| "whiskey", |
| "beer", |
| "wine" |
| ], |
| "weight": 172 |
| } |
| </pre> |
| <div class="selectors"> |
| <div class="title"> Choose A Selector... </div> |
| <div class="selector">.languagesSpoken .lang</div> |
| <div class="selector">.drinkPreference :first-child</div> |
| <div class="selector">."weight"</div> |
| <div class="selector">.lang</div> |
| <div class="selector">.favoriteColor</div> |
| <div class="selector">string.favoriteColor</div> |
| <div class="selector">string:last-child</div> |
| <div class="selector">string:nth-child(-n+2)</div> |
| <div class="selector">string:nth-child(odd)</div> |
| <div class="selector">string:nth-last-child(1)</div> |
| <div class="selector">:root</div> |
| <div class="selector">number</div> |
| <div class="selector">:has(:root > .preferred)</div> |
| <div class="selector">.preferred ~ .lang</div> |
| <div class="selector">:has(.lang:val("Spanish")) > .level</div> |
| <div class="selector">.lang:val("Bulgarian") ~ .level</div> |
| <div class="selector">.seatingPreference :nth-child(1)</div> |
| <div class="selector">.weight:expr(x<180) ~ .name .first</div> |
| </div> |
| </div> |
| <div style="display: none" id="cred" class="content"> |
| <p>JSONSelect is dedicated to sad code everywhere that looks like this:</p> |
| <pre class="json">if (foo && foo.bar && foo.bar.baz && foo.bar.baz.length > 2) |
| return foo.bar.baz[2]; |
| return undefined;</pre> |
| <p><a href="http://trickyco.de/">Lloyd Hilaiel</a> started it, and is surrounded by many <a href="https://github.com/lloyd/JSONSelect/contributors">awesome contributors</a>.</p> |
| <p><a href="http://blog.mozilla.com/dherman/">Dave Herman</a> provided the name, and lots of encouragement.</p> |
| <p><a href="http://open-mike.org/">Mike Hanson</a> gave deep feedback and ideas.</p> |
| <p><a href="http://ejohn.org/">John Resig</a> unwittingly contributed his <a href="http://ejohn.org/blog/selectors-that-people-actually-use/">design thoughts</a>.</p> |
| <p>The jsonselect.org site design was inspired by <a href="http://www.stephenwildish.co.uk/">Stephen Wildish</a>.</p> |
| <p><a href="http://json.org/">JSON</a> and <a href="http://www.w3.org/TR/css3-selectors/">CSS3 Selectors</a> are the prerequisites to JSONSelect's existence, so thanks to you guys too.</p> |
| <p></p> |
| </div> |
| <div style="display: none" id="doc" class="content"> |
| Loading documentation... |
| </div> |
| <div style="display: none" id="code" class="content"> |
| <p>Several different implementations of JSONSelect are available:</p> |
| <p class="item"><b>JavaScript:</b> Get it <a href="js/jsonselect.js">documented</a>, or <a href="js/jsonselect.min.js">minified</a> (<i>2.9k</i> minified and gzipped). |
| The code is <a href="https://github.com/lloyd/JSONSelect">on github</a>.</p> |
| <p class="item"><b>node.js:</b> <tt>npm install JSONSelect</tt></p> |
| <p class="item"><b>ruby:</b> A gem by <a href="https://github.com/fd">Simon Menke</a>: <a href="https://github.com/fd/json_select">https://github.com/fd/json_select</a></p> |
| <p class="psst"> |
| Something missing from this list? Please, <a href="https://github.com/lloyd/JSONSelect/issues">tell me about it</a>. |
| </p> |
| </div> |
| |
| </div> |
| |
| |
| <a href="https://github.com/lloyd/JSONSelect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/4c7dc970b89fd04b81c8e221ba88ff99a06c6b61/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub"></a> |
| </body> |
| <script src="js/json2.js"></script> |
| <script src="js/showdown.js"></script> |
| <script src="js/jquery-1.6.1.min.js"></script> |
| <script src="js/jquery.ba-hashchange.min.js"></script> |
| <script src="js/jsonselect.js"></script> |
| <script src="js/nav.js"></script> |
| <script src="js/demo.js"></script> |
| </html> |
