291 lines
13 KiB
291 lines
13 KiB
12 years ago
|
<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">
|
||
|
11 years ago
|
<title>JSONPath evaluator</title>
|
||
|
11 years ago
|
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
|
||
|
|
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
||
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
|
||
|
12 years ago
|
|
||
|
11 years ago
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
||
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="js/jsonpath-0.8.0.js"></script>
|
||
|
12 years ago
|
</head>
|
||
|
|
<body role="document">
|
||
|
|
<div class="container">
|
||
|
11 years ago
|
<h3>JSONPath evaluator</h3>
|
||
|
12 years ago
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
11 years ago
|
<div class="form-group">
|
||
|
|
<select id="selTemplates" name="template" class="form-control">
|
||
|
|
<option value="blank"></option>
|
||
|
11 years ago
|
<option value="goessner.json">Goessner examle</option>
|
||
|
|
<option value="twitter.json">Twitter API</option>
|
||
|
|
<option value="webxml.json">Webapp</option>
|
||
|
11 years ago
|
<option value="20k.json">20k</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
12 years ago
|
|
||
|
11 years ago
|
<div class="form-group">
|
||
|
|
<textarea id="txtJson" name="json" rows="15" class="form-control" placeholder="Select a template above or enter JSON"></textarea>
|
||
|
|
</div>
|
||
|
12 years ago
|
|
||
|
11 years ago
|
<div class="input-group">
|
||
|
11 years ago
|
<span id="path-status-tool" class="input-group-addon" data-toggle="tooltip" data-placement="top" title="Invalid path"><span id="path-status" class="fa fa-ban"></span></span>
|
||
|
11 years ago
|
<input id="txtPath" name="path" placeholder="Enter path" autocomplete="off" class="form-control"/>
|
||
|
|
<span class="input-group-btn">
|
||
|
|
<button id="submit" class="btn btn-primary" type="button">Go!</button>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
11 years ago
|
|
||
|
11 years ago
|
<br/>
|
||
|
11 years ago
|
|
||
|
11 years ago
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<fieldset>
|
||
|
11 years ago
|
<legend>JSONPath options</legend>
|
||
|
11 years ago
|
<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>
|
||
|
11 years ago
|
</div>
|
||
|
11 years ago
|
</fieldset>
|
||
|
11 years ago
|
</div>
|
||
|
|
|
||
|
11 years ago
|
<div class="col-md-6">
|
||
|
|
<fieldset>
|
||
|
|
<legend>Jayway options</legend>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
11 years ago
|
<input type="checkbox" name="flagSuppress" id="cbFlagSuppress" />
|
||
|
|
Suppress exceptions
|
||
|
11 years ago
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
11 years ago
|
<input type="checkbox" name="flagWrap" id="cbFlagWrap" />
|
||
|
|
Always return result list
|
||
|
11 years ago
|
</label>
|
||
|
|
</div>
|
||
|
11 years ago
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" name="flagNullLeaf" id="cbFlagNullLeaf" />
|
||
|
|
Return null for missing leaf
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
11 years ago
|
</fieldset>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
12 years ago
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
11 years ago
|
|
||
|
12 years ago
|
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
|
||
|
11 years ago
|
<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>
|
||
|
11 years ago
|
<li><a href="#goessner-tab" data-toggle="tab">Goessner</a></li>
|
||
|
12 years ago
|
</ul>
|
||
|
11 years ago
|
|
||
|
12 years ago
|
<div id="my-tab-content" class="tab-content">
|
||
|
11 years ago
|
|
||
|
|
<div class="tab-pane active" id="jayway-tab">
|
||
|
|
<br/>
|
||
|
11 years ago
|
<a href="https://code.google.com/p/json-path/" target="_blank" style="float: right">About implementation...</a>
|
||
|
11 years ago
|
<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/>
|
||
|
11 years ago
|
<a href="https://github.com/RichardHightower/boon/wiki" target="_blank" style="float: right">About implementation...</a>
|
||
|
11 years ago
|
<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>
|
||
|
12 years ago
|
</div>
|
||
|
|
</div>
|
||
|
11 years ago
|
<p id="boon-error" class="bg-danger"></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab-pane" id="nebhale-tab">
|
||
|
|
<br/>
|
||
|
11 years ago
|
<a href="https://github.com/nebhale/JsonPath" target="_blank" style="float: right">About implementation...</a>
|
||
|
11 years ago
|
<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">
|
||
|
12 years ago
|
<br/>
|
||
|
11 years ago
|
<a href="http://goessner.net/articles/JsonPath/" target="_blank" style="float: right">About implementation...</a>
|
||
|
12 years ago
|
<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>
|
||
|
11 years ago
|
|
||
|
12 years ago
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
11 years ago
|
|
||
|
12 years ago
|
$( document ).ready(function() {
|
||
|
11 years ago
|
$('#path-status-tool').tooltip({
|
||
|
|
container: 'body',
|
||
|
|
delay: 0
|
||
|
|
});
|
||
|
|
|
||
|
11 years ago
|
$('#selTemplates').on('change', function() {
|
||
|
|
var val = this.value;
|
||
|
|
$.ajax({
|
||
|
11 years ago
|
url: "/json/" + val,
|
||
|
11 years ago
|
success: function(data){
|
||
|
|
if(data){
|
||
|
11 years ago
|
data = toJsonString(data);
|
||
|
11 years ago
|
}
|
||
|
|
$("#txtJson").val(data);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
11 years ago
|
|
||
|
|
$('#txtPath').keyup(function(e) {
|
||
|
|
clearTimeout($.data(this, 'timer'));
|
||
|
|
if (e.keyCode === 13) {
|
||
|
|
$('#submit').click();
|
||
|
|
e.preventDefault();
|
||
|
|
} else {
|
||
|
|
$(this).data('timer', setTimeout(checkPath, 500));
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
11 years ago
|
function checkPath() {
|
||
|
11 years ago
|
var pathString = $("#txtPath").val();
|
||
|
11 years ago
|
|
||
|
|
var updateDisplay = function(icon, tooltip){
|
||
|
11 years ago
|
$('#path-status').removeClass().addClass('fa ' + icon);
|
||
|
11 years ago
|
$('#path-status-tool').attr('data-original-title', tooltip).tooltip('fixTitle');
|
||
|
|
};
|
||
|
|
|
||
|
|
if(pathString.length ==0){
|
||
|
11 years ago
|
updateDisplay('fa-ban', 'Invalid path');
|
||
|
11 years ago
|
return;
|
||
|
|
}
|
||
|
11 years ago
|
|
||
|
|
$.get('/api/validate/?path=' + pathString, function(data) {
|
||
|
|
if(data){
|
||
|
|
if(data.result === -1){
|
||
|
11 years ago
|
updateDisplay('fa-ban', 'Invalid path');
|
||
|
11 years ago
|
}
|
||
|
|
else if(data.result === 0){
|
||
|
11 years ago
|
updateDisplay('fa-bullseye', 'Path is definite');
|
||
|
11 years ago
|
}
|
||
|
|
else if(data.result === 1){
|
||
|
11 years ago
|
updateDisplay('fa-navicon', 'Path is indefinite');
|
||
|
11 years ago
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
11 years ago
|
$('#submit').on('click', function() {
|
||
|
|
|
||
|
|
var json = $('#txtJson').val();
|
||
|
|
var path = $('#txtPath').val();
|
||
|
|
|
||
|
|
var data = {
|
||
|
|
json: json,
|
||
|
|
path: path,
|
||
|
11 years ago
|
type: $('input[name=rbType]:checked').val(),
|
||
|
11 years ago
|
flagWrap: $('#cbFlagWrap').prop('checked'),
|
||
|
11 years ago
|
flagNullLeaf: $('#cbFlagNullLeaf').prop('checked'),
|
||
|
11 years ago
|
flagSuppress: $('#cbFlagSuppress').prop('checked')
|
||
|
12 years ago
|
}
|
||
|
11 years ago
|
console.log(data);
|
||
|
|
$.ajax({
|
||
|
11 years ago
|
url: "/api/eval",
|
||
|
11 years ago
|
type: 'POST',
|
||
|
|
dataType: 'json',
|
||
|
|
data: data,
|
||
|
|
success: function(data) {
|
||
|
|
|
||
|
|
$('#jayway-time').text(data.jayway.time);
|
||
|
11 years ago
|
$('#jayway-res').hide().text(data.jayway.result).fadeIn();
|
||
|
11 years ago
|
if(data.jayway.error){
|
||
|
|
$('#jayway-error').text(data.jayway.error).show();
|
||
|
|
} else {
|
||
|
|
$('#jayway-error').css( "display", "none")
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
$('#boon-time').text(data.boon.time);
|
||
|
11 years ago
|
$('#boon-res').hide().text(data.boon.result).fadeIn();
|
||
|
11 years ago
|
if(data.boon.error){
|
||
|
|
$('#boon-error').text(data.boon.error).show();
|
||
|
|
} else {
|
||
|
|
$('#boon-error').css( "display", "none")
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#nebhale-time').text(data.nebhale.time);
|
||
|
11 years ago
|
$('#nebhale-res').hide().text(data.nebhale.result).fadeIn();
|
||
|
11 years ago
|
if(data.nebhale.error){
|
||
|
|
$('#nebhale-error').text(data.nebhale.error).show();
|
||
|
|
} else {
|
||
|
|
$('#nebhale-error').css( "display", "none")
|
||
|
|
}
|
||
|
|
|
||
|
|
var start = new Date().getTime();
|
||
|
11 years ago
|
var res = jsonPath(JSON.parse(json), path, {resultType: $('input[name=rbType]:checked').val() });
|
||
|
11 years ago
|
var elapsed = new Date().getTime() - start;
|
||
|
|
|
||
|
|
$("#goessner-time").text(elapsed);
|
||
|
11 years ago
|
$("#goessner-res").hide().text(toJsonString(res)).fadeIn();
|
||
|
11 years ago
|
|
||
|
|
$('.prettyprinted').removeClass('prettyprinted');
|
||
|
11 years ago
|
|
||
|
11 years ago
|
prettyPrint();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
12 years ago
|
|
||
|
|
});
|
||
|
11 years ago
|
|
||
|
|
var toJsonString = function(src){
|
||
|
|
var str = JSON.stringify(src, null, ' ');
|
||
|
|
if(str){
|
||
|
|
str = str.replace(/": /g, '" : ');
|
||
|
|
str = str.replace(/": \[/g, '" : [');
|
||
|
|
str = str.replace(/": {/g, '" : {');
|
||
|
|
}
|
||
|
|
return str;
|
||
|
|
};
|
||
|
12 years ago
|
</script>
|
||
|
|
</html>
|