index.html
1 <!doctype html> 2 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> 3 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> 4 <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> 5 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 6 <head> 7 <meta charset="utf-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 9 <title>JMESPath Demo</title> 10 <meta name="description" content="JMESPath Demo"> 11 <!-- 12 <link rel="stylesheet" href="css/bootstrap.min.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 --> 15 <script src="artifacts/jmespath.min.js"></script> 16 </head> 17 <body> 18 <div class="container-fluid"> 19 <div class="hero-unit"> 20 <h1>JSONPath Online Evaluator</h1> 21 <div id="info"> 22 <p>Author: <a href="http://ashphy.com/">Kazuki Hamasaki</a> [ashphy@ashphy.com]</p> 23 <p>This evaluator uses <a href="http://goessner.net/articles/JsonPath/">JSONPath - XPath for JSON</a></p> 24 </div> 25 </div> 26 <div class="row-fluid"> 27 <div class="span6"> 28 <h2>Inputs</h2> 29 <form> 30 <label>JSONPath Syntax</label> 31 <input type="text" placeholder="Put JSONPath syntax" value="$.phoneNumbers[:1].type" /> 32 <span class="help-block">Example '$.phoneNumbers[*].type' See also <a href="http://goessner.net/articles/JsonPath/index.html#e2">JSONPath expressions</a></span> 33 <label>JSON</label> 34 <textarea rows="30" cols="80"> 35 { 36 "firstName": "John", 37 "lastName" : "doe", 38 "age" : 26, 39 "address" : 40 { 41 "streetAddress": "naist street", 42 "city" : "Nara", 43 "postalCode" : "630-0192" 44 }, 45 "phoneNumbers": 46 [ 47 { 48 "type" : "iPhone", 49 "number": "0123-4567-8888" 50 }, 51 { 52 "type" : "home", 53 "number": "0123-4567-8910" 54 } 55 ] 56 } 57 </textarea> 58 </form> 59 </div> 60 <div class="span6 "> 61 <h2>Evaluation Results</h2> 62 <pre class="result">false</pre> 63 </div> 64 </div> 65 </div> 66 67 <!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom --> 68 69 <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline --> 70 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 71 <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script> 72 <script src="js/vendor/jquery.textchange.min.js"></script> 73 74 <script> 75 var evaluate = function(event, previousText){ 76 var query = $("input").val(); 77 var json = JSON.parse($("textarea").val().replace(/(\r\n|\n|\r)/gm,"")); 78 var result = jsonPath(json, query); 79 $(".result").empty(); 80 if(result) { 81 $(".result").append(dump(result)); 82 } 83 } 84 85 $(document).ready(function(){ 86 $('input').bind('textchange', evaluate); 87 $('textarea').bind('textchange', evaluate); 88 evaluate(); 89 }); 90 </script> 91 </body> 92 </html> 93