You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
233 lines
11 KiB
233 lines
11 KiB
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>JsonPath</title> |
|
<link rel="stylesheet" href="/static/css/bootstrap.css"> |
|
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> |
|
<link rel="stylesheet" href="//google-code-prettify.googlecode.com/svn/loader/prettify.css"> |
|
|
|
<script type="text/javascript" src="//google-code-prettify.googlecode.com/svn/loader/prettify.js?autoload=false"></script> |
|
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
|
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> |
|
|
|
<script type="text/javascript" src="/static/js/jsonpath-0.8.0.js"></script> |
|
<script type="text/javascript" src="/static/js/bootstrap.js"></script> |
|
</head> |
|
<body role="document"> |
|
<div class="container"> |
|
<h3>JSONPath evaluator</h3> |
|
<div class="row"> |
|
<div class="col-md-6"> |
|
<form id="form"> |
|
<div class="form-group"> |
|
<select id="selTemplates" name="template" class="form-control"> |
|
<option value="blank"></option> |
|
<option value="goessner">goessner</option> |
|
<option value="twitter">twitter</option> |
|
<option value="webapp">webapp</option> |
|
<option value="20k">20k</option> |
|
</select> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<textarea id="txtJson" name="json" rows="15" class="form-control" placeholder="Select a template above or enter JSON"></textarea> |
|
</div> |
|
|
|
<div class="input-group"> |
|
<input id="txtPath" name="path" value="{{path}}" placeholder="Enter path" class="form-control"/> |
|
<span class="input-group-btn"> |
|
<button id="submit" class="btn btn-default" type="button">Go!</button> |
|
</span> |
|
</div> |
|
|
|
<br/> |
|
|
|
<div class="row"> |
|
<div class="col-md-6"> |
|
<fieldset> |
|
<legend>Result options</legend> |
|
<div class="radio"> |
|
<label> |
|
<input type="radio" name="rbType" value="VALUE" checked/> |
|
Matching values |
|
</label> |
|
</div> |
|
<div class="radio"> |
|
<label> |
|
<input type="radio" name="rbType" value="PATH"/> |
|
Normalized path expressions |
|
</label> |
|
</div> |
|
</fieldset> |
|
</div> |
|
|
|
<div class="col-md-6"> |
|
<fieldset> |
|
<legend>Jayway options</legend> |
|
<div class="checkbox"> |
|
<label> |
|
<input type="checkbox" name="flagWrap" id="cbFlagWrap" /> |
|
Always return result as list |
|
</label> |
|
</div> |
|
<div class="checkbox"> |
|
<label> |
|
<input type="checkbox" name="flagMerge" id="cbFlagMerge" /> |
|
Merge multi props to new object |
|
</label> |
|
</div> |
|
<div class="checkbox"> |
|
<label> |
|
<input type="checkbox" name="flagSuppress" id="cbFlagSuppress" /> |
|
Suppress exceptions |
|
</label> |
|
</div> |
|
</fieldset> |
|
</div> |
|
</div> |
|
|
|
</form> |
|
</div> |
|
<div class="col-md-6"> |
|
|
|
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> |
|
<li class="active"><a href="#jayway-tab" data-toggle="tab">Jayway</a></li> |
|
<li><a href="#boon-tab" data-toggle="tab">Boon</a></li> |
|
<li><a href="#nebhale-tab" data-toggle="tab">Nebhale</a></li> |
|
<li><a href="#goessner-tab" data-toggle="tab">Gossner</a></li> |
|
</ul> |
|
|
|
<div id="my-tab-content" class="tab-content"> |
|
|
|
<div class="tab-pane active" id="jayway-tab"> |
|
<br/> |
|
<span id="jayway-time"></span> millis |
|
<hr/> |
|
<div class="row"> |
|
<div class="col-md-12"> |
|
<pre id="jayway-res" class="prettyprint" style="background-color: transparent; border: none;"></pre> |
|
</div> |
|
</div> |
|
<p id="jayway-error" class="bg-danger"></p> |
|
</div> |
|
|
|
<div class="tab-pane" id="boon-tab"> |
|
<br/> |
|
<span id="boon-time"></span> millis |
|
<hr/> |
|
<div class="row"> |
|
<div class="col-md-12"> |
|
<pre id="boon-res" class="prettyprint" style="background-color: transparent; border: none;"></pre> |
|
</div> |
|
</div> |
|
<p id="boon-error" class="bg-danger"></p> |
|
</div> |
|
|
|
<div class="tab-pane" id="nebhale-tab"> |
|
<br/> |
|
<span id="nebhale-time"></span> millis |
|
<hr/> |
|
<div class="row"> |
|
<div class="col-md-12"> |
|
<pre id="nebhale-res" class="prettyprint" style="background-color: transparent; border: none;"></pre> |
|
</div> |
|
</div> |
|
<p id="nebhale-error" class="bg-danger"></p> |
|
</div> |
|
|
|
<div class="tab-pane" id="goessner-tab"> |
|
<br/> |
|
<span id="goessner-time"></span> millis |
|
<hr/> |
|
<div class="row"> |
|
<div class="col-md-12"> |
|
<pre id="goessner-res" class="prettyprint" style="background-color: transparent; border: none;"></pre> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
<script> |
|
|
|
$( document ).ready(function() { |
|
$('#selTemplates').on('change', function() { |
|
var val = this.value; |
|
$.ajax({ |
|
url: "/templates/" + val, |
|
success: function(data){ |
|
if(data){ |
|
data = JSON.stringify(data, null, ' '); |
|
} |
|
$("#txtJson").val(data); |
|
} |
|
}); |
|
}); |
|
|
|
$('#submit').on('click', function() { |
|
|
|
var json = $('#txtJson').val(); |
|
var path = $('#txtPath').val(); |
|
|
|
var data = { |
|
json: json, |
|
path: path, |
|
type: $('input[name=rbType]:checked', '#form').val(), |
|
flagWrap: $('#cbFlagWrap').prop('checked'), |
|
flagMerge: $('#cbFlagMerge').prop('checked'), |
|
flagSuppress: $('#cbFlagSuppress').prop('checked') |
|
} |
|
console.log(data); |
|
$.ajax({ |
|
url: "/eval", |
|
type: 'POST', |
|
dataType: 'json', |
|
data: data, |
|
success: function(data) { |
|
|
|
$('#jayway-time').text(data.jayway.time); |
|
$('#jayway-res').text(data.jayway.result).effect( "highlight", {color: '#428bca'} ); |
|
if(data.jayway.error){ |
|
$('#jayway-error').text(data.jayway.error).show(); |
|
} else { |
|
$('#jayway-error').css( "display", "none") |
|
} |
|
|
|
|
|
$('#boon-time').text(data.boon.time); |
|
$('#boon-res').text(data.boon.result).effect( "highlight", {color: '#428bca'} ); |
|
if(data.boon.error){ |
|
$('#boon-error').text(data.boon.error).show(); |
|
} else { |
|
$('#boon-error').css( "display", "none") |
|
} |
|
|
|
$('#nebhale-time').text(data.nebhale.time); |
|
$('#nebhale-res').text(data.nebhale.result).effect( "highlight", {color: '#428bca'} ); |
|
if(data.nebhale.error){ |
|
$('#nebhale-error').text(data.nebhale.error).show(); |
|
} else { |
|
$('#nebhale-error').css( "display", "none") |
|
} |
|
|
|
var start = new Date().getTime(); |
|
var res = jsonPath(JSON.parse(json), path, {resultType: $('input[name=rbType]:checked', '#form').val() }); |
|
var elapsed = new Date().getTime() - start; |
|
|
|
$("#goessner-time").text(elapsed); |
|
$("#goessner-res").text(JSON.stringify(res, null, ' ')); |
|
|
|
$('.prettyprinted').removeClass('prettyprinted'); |
|
prettyPrint(); |
|
} |
|
}); |
|
}); |
|
|
|
}); |
|
</script> |
|
</html> |