-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
206 lines (170 loc) · 8.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JsonSQL - Query json objects with SQL syntax</title>
<meta name="Description" content="JsonSQL - Query json objects with SQL syntax" />
<meta name="Keywords" content="javascript,json,sql,query,parse,select" />
<style type="text/css">
body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,ol,li,dl,dt,dd,pre,blockquote,fieldset,label{
margin:0;
padding:0;
border:0;
}
body{ background-color: #f8f7ec; border-top: solid 10px #777; font: 90% Helvetica, sans-serif; padding: 20px; }
h1,h2,h3,h4{ margin: 10px 0; font-family: Plantin, "Plantin std", "Plantin", "Baskerville", Georgia, "Times New Roman", serif; font-weight: normal; }
h1{font-size: 2.2em;margin: 0 0 20px 0; }
h2{ background-color: #D95656; line-height: 18px; font-size: 18px; letter-spacing: 1px; padding: 5px 10px; margin: 10px 0 10px -60px; color: #fff; display: inline-block; border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px; }
h3{ color: #D95656; font-size: 18px; letter-spacing: 1px; margin: 15px 0 15px -20px; }
h4{ color: #777; font-size: 18px; letter-spacing: 1px; }
p{ margin: 10px 0; line-height: 150%; }
a{ color: #7b94b2; }
ul,ol{ margin: 10px 0 10px 40px; }
li{ margin: 10px 0; line-height: 150%; }
dl{ margin: 10px 0; }
dl dt{ font-weight: bold; line-height: 20px; margin: 10px 0 0 0; }
dl dd{ margin: -20px 0 10px 120px; padding-bottom: 10px; border-bottom: solid 1px #eee;}
pre{ font-size: 12px; line-height: 16px; padding: 5px 5px 5px 10px; margin: 10px 0; border-left: solid 5px #9EC45F; overflow: auto; }
.wrapper{ background-color: #ffffff; width: 600px; border: solid 1px #eeeeee; padding: 20px 20px 20px 40px; margin: 0 auto; border-radius: 6px; -moz-border-radius: 6px;-webkit-border-radius: 6px; }
.header{ text-align: center;position: relative; margin: 0 -20px 0 -40px; }
.header ul{ margin: 10px 0; display: block; }
.header ul li{ display: inline-block; list-style: none; margin: 10px 0; width: 100px; }
.header ul li a{ text-transform: uppercase; color: #777; text-decoration: none; font-size: 12px; }
.header ul li a:hover{ color: #555; }
.header ul.scrollnav{ position: fixed; top: 0px; left: 50%; background-color: #777; display: none; margin: 0 0 0 -82px; border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px;-webkit-border-radius: 0 0 0 6px;}
.header ul.scrollnav li a{ color: #fff; }
.header ul.scrollnav.scrolled{ display: inline; }
.example-container button{ border: none; color: #fff; padding: 4px 8px; background-color: #9ec45f; border-radius: 4px; -moz-border-radius: 4px;-webkit-border-radius: 4px; }
.clear{ clear: both; }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>JsonSQL - Query json objects with SQL syntax</h1>
<ul class="nav">
<li><a href="#Get_Started" title="Get Started">Get Started</a></li>
<li><a href="#Notes" title="Notes">Notes</a></li>
<li><a href="#Examples" title="Examples">Examples</a></li>
<li><a href="#Methods" title="Methods">Methods</a></li>
</ul>
</div>
<div class="content">
<p>JsonSQL provides a way to query json with an SQL syntax. It provides a SELECT sql query functionality that uses a mix of javascript to process WHERE conditions.</p>
<h2 id="Get_Started">Get Started</h2>
<h3>Highly Recommended</h3>
<p>Subscribe to <a href="http://trentrichardson.com/category/impromptu/" title="TrentRichardson.com">my newsletter</a> and follow me <a href="http://twitter.com/practicalweb" title="Follow me on Twitter">@practicalweb</a>.</p>
<h3>Donation</h3>
<p>Has JsonSQL been helpful to you?</p>
<div class="donation">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="ZBNQYNC8VHBBS">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
<h3 id="Download">Download</h3>
<ul>
<li><a href="https://github.com/trentrichardson/JsonSQL" title="Fork it on Github">Download or Fork on Github</a></li>
</ul>
<p>No other libraries are required. The examples below may use external libraries simply to create simple examples.</p>
<h3>Version</h3>
<p>Version 0.1</p>
<p>Last updated on 03/18/2015</p>
<p>JsonSQL is currently available for use in all personal or commercial projects under MIT license.</p>
<ul>
<li><a href="http://trentrichardson.com/Impromptu/MIT-LICENSE.txt" title="MIT License">MIT License</a></li>
</ul>
<h2 id="Notes">Notes</h2>
<p>There are a few things you need to keep in mind while using JsonSQL:</p>
<ul>
<li>Only Select statements are supported</li>
<li>The requested fields may be a "*" or a list of fields. "*" is likely faster in most cases.</li>
<li>When typing lists "select field1,field2,field3" or "limit 5,10 do not use spaces.</li>
<li>When using the "where" clause enclose all conditions with one set of parenthesis "where (category=='The Category' || category=='Other Category')".</li>
<li>The where clause is a javascript condition, not sql. It should use the scope emplied by "from". Javascript functions may be used here as well as javascript operators.</li>
<li>The from clause should establish the scope you would like returned. It should start with "json" and use the dot notation: "json.channel.items" and should point to an array within the object.</li>
<li>The order by option can accept a list but will only order by the first field at this time(asc,desc,ascnum,descnum).</li>
</ul>
<h2 id="Examples">Examples</h2>
<!-- ============= example -->
<div class="example-container">
<h3>Simple select query</h3>
<p>Use the jsonsql.query function by passing it an sql string. The second parameter is the json data. (Open your console to see the results)</p>
<pre class="ex code" data-lllanguage="js">
console.log(
jsonsql.query("select * from json.channel.items order by title desc", jsondata)
);
</pre>
<div class="buttons">
<button class="run">Run It!</button>
</div>
</div>
<!-- ============= example -->
<div class="example-container">
<h3>Query with condtions</h3>
<p>Create a query with a where clause. The condtions use javascript format when doing comparisons. ex: This means use == instead of =. (Open your console to see the results)</p>
<pre class="ex code" data-lllanguage="js">
console.log(
jsonsql.query("select title,url from json.channel.items where (category=='javascript' || category=='vista') order by title,category asc limit 3", jsondata)
);
</pre >
<div class="buttons">
<button class="run">Run It!</button>
</div>
</div>
<h2 id="Methods">The Methods</h2>
<pre class="code" data-lllanguage="js">
// Query a json data object. The first parameter is
// an sql string, the second parameter is the json
// An array of objects will be returned
jsonsql.query(sql, data);
</pre>
</div>
</div>
<script type="text/javascript" src="lib/zepto.min.js"></script>
<script type="text/javascript" src="lib/jquery-litelighter.js"></script>
<script type="text/javascript" src="lib/jsondata.js"></script>
<script type="text/javascript" src="jsonsql.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// quick routine for scrolling nav
var $nav = $('.header ul'),
navoffset = $nav.offset(),
$navclone = $nav.clone().addClass('scrollnav').appendTo('.header'),
$window = $(window);
$window.scroll(function(e){
if((navoffset.top+50) < $window.scrollTop()){
if(!$navclone.hasClass('scrolled'))
$navclone.addClass('scrolled');
}
else $navclone.removeClass('scrolled');
}).scroll();
// highlight the code
$('pre.code').litelighter();
// run the examples
$('.example-container').each(function(i,el){
var $ex = $(this),
$run = $ex.find('.run'),
code = $ex.find('pre.ex').data('llcode');
$run.click(function(e){
e.preventDefault();
(new Function(code))();
});
});
});
</script>
<!--
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7602218-1");
pageTracker._trackPageview();
} catch(err) {}</script>
-->
</body>
</html>