Skip to content

Commit bb3cc5f

Browse files
nilandevnilandev
committed
Merge remote-tracking branch 'origin/main'
2 parents 93a464a + 8b090af commit bb3cc5f

25 files changed

+1041
-642
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# JSON Formatter
22

3-
A Open-source Chrome extension that automatically transforms raw JSON data into a beautifully formatted, easy-to-read structure. If you're a developer, data analyst, or someone who frequently works with JSON, this tool is designed to make your life easier.
3+
An Open-source Chrome extension that automatically transforms raw JSON data into a beautifully formatted, easy-to-read structure. If you're a developer, data analyst, or someone who frequently works with JSON, this tool is designed to make your life easier.
44

55
![](https://raw.githubusercontent.com/nilandev/json-formatter-extenson/main/screenshots/large-promo.png)
66

‎filter-help.html‎

Lines changed: 224 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,237 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<link rel="preconnect" href="https://fonts.googleapis.com">
5-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
6-
<link
7-
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz@0,9..40;1,9..40&display=swap"
8-
rel="stylesheet">
9-
<meta charset="UTF-8">
10-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11-
<title>JSONPath Filter</title>
12-
<style>
13-
body {
14-
font-family: "DM Sans", sans-serif;
15-
font-optical-sizing: auto;
16-
line-height: 1.6;
17-
padding: 20px;
18-
max-width: 960px;
19-
margin: 0 auto;
20-
font-size: 1rem;
21-
}
4+
<link rel="preconnect" href="https://fonts.googleapis.com">
5+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
6+
<link
7+
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz@0,9..40;1,9..40&display=swap"
8+
rel="stylesheet">
9+
<meta charset="UTF-8">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<title>JSON Formatter - User Guide</title>
12+
<style>
13+
body {
14+
font-family: "DM Sans", sans-serif;
15+
font-optical-sizing: auto;
16+
line-height: 1.5;
17+
margin: 0 auto;
18+
font-size: 1rem;
19+
background: #f8f9fa;
20+
}
2221

23-
h1 {
24-
color: #333;
25-
}
22+
h1 {
23+
color: #202124;
24+
}
2625

27-
h2 {
28-
color: #666;
29-
}
26+
h2 {
27+
color: #444444;
28+
}
3029

31-
code {
32-
background-color: #f4f4f4;
33-
padding: 2px 4px;
34-
border-radius: 4px;
35-
}
30+
code {
31+
background-color: #f4f4f4;
32+
padding: 2px 4px;
33+
border-radius: 4px;
34+
}
3635

37-
table {
38-
border-collapse: collapse;
39-
width: 100%;
40-
}
36+
table {
37+
border-collapse: collapse;
38+
width: 100%;
39+
}
4140

42-
th, td {
43-
border: 1px solid #ddd;
44-
padding: 8px;
45-
text-align: left;
46-
}
41+
th, td {
42+
border: 1px solid #ddd;
43+
padding: 8px;
44+
text-align: left;
45+
}
4746

48-
th {
49-
background-color: #f2f2f2;
50-
}
51-
</style>
47+
th {
48+
background-color: #f2f2f2;
49+
}
50+
51+
pre {
52+
background: #f4f4f4;
53+
padding: 12px;
54+
}
55+
56+
strong {
57+
font-weight: bold;
58+
}
59+
60+
.content-card {
61+
background: white;
62+
padding: 3rem;
63+
max-width: 1020px;
64+
margin: 3.5rem auto;
65+
}
66+
</style>
5267
</head>
5368
<body>
54-
<h1>Using JSONPath Filters</h1>
55-
56-
<p class="lead">JSONPath is a query language for JSON, similar to XPath for XML. It allows you to select and extract data from a JSON document. You use a JSONPath expression to traverse the path to an element in the JSON structure. You start at the root node or element, represented by <code>$</code>, and reach the required element in the JSON structure to extract data from it.</p>
57-
58-
<p>A JSONPath expression specifies a path to an element (or a set of elements) in a JSON structure. Paths can use the dot notation:</p>
59-
60-
<h2>Syntax</h2>
61-
<table>
62-
<tr>
63-
<th>Symbol</th>
64-
<th>Description</th>
65-
</tr>
66-
<tr>
67-
<td><code>$</code></td>
68-
<td>The root object/element</td>
69-
</tr>
70-
<tr>
71-
<td><code>@</code></td>
72-
<td>The current object/element</td>
73-
</tr>
74-
<tr>
75-
<td><code>. or []</code></td>
76-
<td>Child operator</td>
77-
</tr>
78-
<tr>
79-
<td><code>..</code></td>
80-
<td>Recursive descent. JSONPath borrows this syntax from E4X.</td>
81-
</tr>
82-
<tr>
83-
<td><code>*</code></td>
84-
<td>Wildcard. All objects/elements regardless of their names.</td>
85-
</tr>
86-
<tr>
87-
<td><code>[]</code></td>
88-
<td>Subscript operator. XPath uses it to iterate over element collections and for predicates. In
89-
Javascript and JSON it is the native array operator.
90-
</td>
91-
</tr>
92-
<tr>
93-
<td><code>[,]</code></td>
94-
<td>Union operator in XPath results in a combination of node sets. JSONPath allows alternate
95-
names or array indices as a set.
96-
</td>
97-
</tr>
98-
<tr>
99-
<td><code>[start:end:step]</code></td>
100-
<td>Array slice operator borrowed from ES4.</td>
101-
</tr>
102-
<tr>
103-
<td><code>()</code></td>
104-
<td>Script expression can be used as an alternative to JSONPath (using the underlying script
105-
engine).
106-
</td>
107-
</tr>
108-
<tr>
109-
<td><code>?()</code></td>
110-
<td>Applies a filter (script) expression.</td>
111-
</tr>
112-
</table>
113-
114-
<h2>Examples</h2>
115-
<table>
116-
<tr>
117-
<th>JSONPath</th>
118-
<th>Description</th>
119-
</tr>
120-
<tr>
121-
<td><code>$.store.book[*].author</code></td>
122-
<td>All authors of books in the store</td>
123-
</tr>
124-
<tr>
125-
<td><code>$..author</code></td>
126-
<td>All authors</td>
127-
</tr>
128-
<tr>
129-
<td><code>$.store..price</code></td>
130-
<td>All prices in the store</td>
131-
</tr>
132-
<tr>
133-
<td><code>$..book[2]</code></td>
134-
<td>The third book</td>
135-
</tr>
136-
<tr>
137-
<td><code>$..book[(@.length-1)]</code></td>
138-
<td>The last book</td>
139-
</tr>
140-
<tr>
141-
<td><code>$..book[0,1]</code></td>
142-
<td>The first two books</td>
143-
</tr>
144-
<tr>
145-
<td><code>$..book[:2]</code></td>
146-
<td>The first two books</td>
147-
</tr>
148-
<tr>
149-
<td><code>$..book[?(@.isbn)]</code></td>
150-
<td>All books with an ISBN number</td>
151-
</tr>
152-
<tr>
153-
<td><code>$..book[?(@.price<10)]</code></td>
154-
<td>All books cheaper than 10</td>
155-
</tr>
156-
<tr>
157-
<td><code>$..*</code></td>
158-
<td>All members of JSON structure</td>
159-
</tr>
160-
</table>
69+
70+
<div class="content-card">
71+
72+
<h1>JSON Formatter - User Guide</h1>
73+
<p>The JSON Formatter Plugin allows you to view, format, and filter JSON data easily. This guide will help you
74+
understand how to use the filtering functionality effectively.</p>
75+
<p>The plugin supports three types of filters:</p>
76+
<ol>
77+
<li><strong>Key:Value</strong>: A simple filter to match specific key-value pairs.</li>
78+
<li><strong>Regex</strong>: Regular expressions to match patterns in keys or values.</li>
79+
<li><strong>JSONPath</strong>: A query language for JSON, similar to XPath for XML.</li>
80+
</ol>
81+
<p>To apply a filter:</p>
82+
<ol>
83+
<li>Select the filter type from the dropdown menu.</li>
84+
<li>Enter your filter expression in the input field.</li>
85+
<li>Click the "Filter" button or press Enter.</li>
86+
</ol>
87+
<p>The plugin will then display only the JSON objects or values that match your filter criteria.</p>
88+
89+
<h2>1. Using Key:Value filters</h2>
90+
<p>The key value filters allow you to find objects with exact matches for a specific key-value pair. Let us consider
91+
this JSON response:</p>
92+
<pre>
93+
[
94+
{
95+
"id": 1,
96+
"title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
97+
"price": 109.95,
98+
"category": "men's clothing",
99+
"rating": {
100+
"rate": 3.9,
101+
"count": 120
102+
}
103+
},
104+
{
105+
"id": 2,
106+
"title": "Mens Casual Premium Slim Fit T-Shirts",
107+
"price": 22.3,
108+
"category": "men's clothing",
109+
"rating": {
110+
"rate": 4.1,
111+
"count": 259
112+
}
113+
},
114+
{
115+
"id": 3,
116+
"title": "Women's 3-in-1 Snowboard Jacket Winter Coats",
117+
"price": 56.99,
118+
"category": "women's clothing",
119+
"rating": {
120+
"rate": 2.6,
121+
"count": 235
122+
}
123+
}
124+
]
125+
</pre>
126+
127+
<p>Syntax</p>
128+
129+
<table>
130+
<tr>
131+
<th>Symbol</th>
132+
<th>Description</th>
133+
</tr>
134+
<tr>
135+
<td><code>category:men's clothing</code></td>
136+
<td>Find products in the "men's clothing" category</td>
137+
</tr>
138+
<tr>
139+
<td><code>price:109.95</code></td>
140+
<td>Get products with a price of 109.95</td>
141+
</tr>
142+
<tr>
143+
<td><code>rating.rate:4.7</code></td>
144+
<td>Find products with a rating rate of 4.7</td>
145+
</tr>
146+
</table>
147+
148+
149+
<h2>2. Regex based filters</h2>
150+
<p>Regex filters allow you to search for patterns in keys or values.</p>
151+
<ul>
152+
<li><code>^Men</code> - Find products with titles starting with "Men"</li>
153+
<li><code>Jacket|Coat</code> - Find products with "Jacket" or "Coat" in the title</li>
154+
<li><code>\d+\.\d{2}</code> - Find products with prices that have cents (two decimal places)</li>
155+
</ul>
156+
157+
<h2>3. Using JSONPath filters</h2>
158+
<p class="lead">JSONPath is a query language for JSON, similar to XPath for XML. It allows you to select and extract
159+
data from a JSON document. You use a JSONPath expression to traverse the path to an element in the JSON
160+
structure.
161+
You start at the root node or element, represented by <code>$</code>, and reach the required element in the JSON
162+
structure to extract data from it.</p>
163+
<p>A JSONPath expression specifies a path to an element (or a set of elements) in a JSON structure. Paths can use
164+
the
165+
dot notation:</p>
166+
167+
<h2>Syntax</h2>
168+
<table>
169+
<tr>
170+
<th>Symbol</th>
171+
<th>Description</th>
172+
</tr>
173+
<tr>
174+
<td><code>$</code></td>
175+
<td>The root object/element</td>
176+
</tr>
177+
<tr>
178+
<td><code>@</code></td>
179+
<td>The current object/element</td>
180+
</tr>
181+
<tr>
182+
<td><code>. or []</code></td>
183+
<td>Child operator</td>
184+
</tr>
185+
<tr>
186+
<td><code>..</code></td>
187+
<td>Recursive descent. JSONPath borrows this syntax from E4X.</td>
188+
</tr>
189+
<tr>
190+
<td><code>*</code></td>
191+
<td>Wildcard. All objects/elements regardless of their names.</td>
192+
</tr>
193+
<tr>
194+
<td><code>[]</code></td>
195+
<td>Subscript operator. XPath uses it to iterate over element collections and for predicates. In
196+
Javascript and JSON it is the native array operator.
197+
</td>
198+
</tr>
199+
<tr>
200+
<td><code>[,]</code></td>
201+
<td>Union operator in XPath results in a combination of node sets. JSONPath allows alternate
202+
names or array indices as a set.
203+
</td>
204+
</tr>
205+
<tr>
206+
<td><code>[start:end:step]</code></td>
207+
<td>Array slice operator borrowed from ES4.</td>
208+
</tr>
209+
<tr>
210+
<td><code>()</code></td>
211+
<td>Script expression can be used as an alternative to JSONPath (using the underlying script
212+
engine).
213+
</td>
214+
</tr>
215+
<tr>
216+
<td><code>?()</code></td>
217+
<td>Applies a filter (script) expression.</td>
218+
</tr>
219+
</table>
220+
221+
<p>Examples:</p>
222+
<ul>
223+
<li><code>$[?(@.price > 50)]</code> - Find products with a price over 50</li>
224+
<li><code>$[?(@.rating.rate >= 4)]</code> - Find products with a rating of 4 or higher</li>
225+
<li><code>$..category</code> - Get all categories</li>
226+
</ul>
227+
228+
229+
<h2>Tips</h2>
230+
<ul>
231+
<li>Filters are case-sensitive by default. For case-insensitive regex, use the <code>(?i)</code> flag.</li>
232+
<li>If your filter returns no results, try broadening your search criteria.</li>
233+
<li>Experiment with different filter types to see which works best for your needs.</li>
234+
</ul>
235+
</div>
161236
</body>
162237
</html>

0 commit comments

Comments
 (0)