-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
90 lines (90 loc) · 17.1 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
<article class="markdown-body entry-content" itemprop="text"><h1><a id="user-content-diverjs" class="anchor" href="#diverjs" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>diver.js</h1>
<p>Dives deep into the DOM and dumps it as a js object.</p>
<h1><a id="user-content-what-does-it-do-" class="anchor" href="#what-does-it-do-" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What does it do ?</h1>
<p>Creating a rest based app requires you to send data to your server in json or xml (most likely). Well you know when the data is huge on the client side you tend to create the json yourself most of the time by writing a lot of boiler plate code. What if you just had to tweak in your html and the hierarchical json with the values would be created magically for you. Interesting ?</p>
<p>So basically diver does all that for you.</p>
<h1><a id="user-content-how-it-works-" class="anchor" href="#how-it-works-" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>How it works ?</h1>
<p>It works by accepting a root-node-id and an empty object. Now it traverses the complete tree and translates every leaf node having a name into its corresponding object literal notation. The name of the leaf node would be translated into an object key and its value will be that key's value.
It is important to note that "Select" html element is an exception to the aforementioned criteria. The name attribute on the select element will be taken as the key and the selected option would be taken as it's value.</p>
<h1><a id="user-content-terminologies" class="anchor" href="#terminologies" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Terminologies</h1>
<p>Read more about the terms used in this repository on the <a href="https://github.com/raul1991/diver.js/wiki">wiki page</a></p>
<h1><a id="user-content-attributes-supported-by-the-library" class="anchor" href="#attributes-supported-by-the-library" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Attributes supported by the library</h1>
<table>
<thead>
<tr>
<th align="center">Attribute</th>
<th align="center">Value</th>
<th align="center">Use With</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">group</td>
<td align="center">path.to.your.json.property</td>
<td align="center">Any non-container html element like h1..h6, p, input(preferably) etc. Any element which will have child elements inside it won't work like table, div etc.</td>
</tr>
<tr>
<td align="center">delimiter</td>
<td align="center">Any token that separates the input value.</td>
<td align="center">input - Html Element</td>
</tr>
<tr>
<td align="center">name</td>
<td align="center">Any valid object key</td>
<td align="center">Any non-container html element like h1..h6, p, input(preferably) etc. Any element which will have child elements inside it won't work like table, div etc.</td>
</tr></tbody></table>
<h1><a id="user-content-how-to-use-it-" class="anchor" href="#how-to-use-it-" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>How to use it ?</h1>
<h3><a id="user-content-include-the-script" class="anchor" href="#include-the-script" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Include the script</h3>
<div class="highlight highlight-source-js"><pre><span class="pl-k"><</span>script type<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>text/javascript<span class="pl-pds">"</span></span> src<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>diver.js<span class="pl-pds">"</span></span><span class="pl-k">><</span><span class="pl-k">/</span>script<span class="pl-k">></span></pre></div>
<h3><a id="user-content-example-html" class="anchor" href="#example-html" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example Html</h3>
<div class="highlight highlight-text-html-basic"><pre><<span class="pl-ent">div</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>container-top<span class="pl-pds">"</span></span> <span class="pl-e">style</span>=<span class="pl-s"><span class="pl-pds">"</span>margin:10%<span class="pl-pds">"</span></span>>
<<span class="pl-ent">div</span>>
<<span class="pl-ent">div</span> <span class="pl-e">style</span>=<span class="pl-s"><span class="pl-pds">"</span>margin-left: -118px<span class="pl-pds">"</span></span>>
<<span class="pl-ent">label</span> <span class="pl-e">for</span>=<span class="pl-s"><span class="pl-pds">"</span>inputName<span class="pl-pds">"</span></span>>Name</<span class="pl-ent">label</span>>
<<span class="pl-ent">div</span>>
<<span class="pl-ent">input</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text<span class="pl-pds">"</span></span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>first_name<span class="pl-pds">"</span></span> <span class="pl-e">group</span>=<span class="pl-s"><span class="pl-pds">"</span>personal_details<span class="pl-pds">"</span></span> <span class="pl-e">placeholder</span>=<span class="pl-s"><span class="pl-pds">"</span>First<span class="pl-pds">"</span></span>
<span class="pl-e">value</span>=<span class="pl-s"><span class="pl-pds">"</span>cafebabe<span class="pl-pds">"</span></span>>
<<span class="pl-ent">input</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text<span class="pl-pds">"</span></span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>last_name<span class="pl-pds">"</span></span> <span class="pl-e">group</span>=<span class="pl-s"><span class="pl-pds">"</span>personal_details<span class="pl-pds">"</span></span> <span class="pl-e">placeholder</span>=<span class="pl-s"><span class="pl-pds">"</span>Last<span class="pl-pds">"</span></span>
<span class="pl-e">value</span>=<span class="pl-s"><span class="pl-pds">"</span>1991<span class="pl-pds">"</span></span>>
</<span class="pl-ent">div</span>>
</<span class="pl-ent">div</span>>
<<span class="pl-ent">div</span> <span class="pl-e">style</span>=<span class="pl-s"><span class="pl-pds">"</span>margin-left: -118px<span class="pl-pds">"</span></span>>
<<span class="pl-ent">label</span> <span class="pl-e">for</span>=<span class="pl-s"><span class="pl-pds">"</span>inputAge<span class="pl-pds">"</span></span>>Age</<span class="pl-ent">label</span>>
<<span class="pl-ent">div</span>>
<<span class="pl-ent">input</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text<span class="pl-pds">"</span></span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>age<span class="pl-pds">"</span></span> <span class="pl-e">group</span>=<span class="pl-s"><span class="pl-pds">"</span>personal_details.age<span class="pl-pds">"</span></span> <span class="pl-e">placeholder</span>=<span class="pl-s"><span class="pl-pds">"</span>Age<span class="pl-pds">"</span></span> <span class="pl-e">value</span>=<span class="pl-s"><span class="pl-pds">"</span>21<span class="pl-pds">"</span></span>>
</<span class="pl-ent">div</span>>
</<span class="pl-ent">div</span>>
<<span class="pl-ent">div</span> <span class="pl-e">style</span>=<span class="pl-s"><span class="pl-pds">"</span>margin-left: -118px<span class="pl-pds">"</span></span>>
<<span class="pl-ent">label</span> <span class="pl-e">for</span>=<span class="pl-s"><span class="pl-pds">"</span>inputEmail<span class="pl-pds">"</span></span>>Email</<span class="pl-ent">label</span>>
<<span class="pl-ent">div</span>>
<<span class="pl-ent">input</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text<span class="pl-pds">"</span></span> <span class="pl-e">group</span>=<span class="pl-s"><span class="pl-pds">"</span>personal_details.email<span class="pl-pds">"</span></span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>email_id<span class="pl-pds">"</span></span> <span class="pl-e">placeholder</span>=<span class="pl-s"><span class="pl-pds">"</span>Email<span class="pl-pds">"</span></span> <span class="pl-e">value</span>=<span class="pl-s"><span class="pl-pds">"</span>[email protected]<span class="pl-pds">"</span></span>>
<<span class="pl-ent">input</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>checkbox<span class="pl-pds">"</span></span> <span class="pl-e">group</span>=<span class="pl-s"><span class="pl-pds">"</span>personal_details<span class="pl-pds">"</span></span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>isChecked<span class="pl-pds">"</span></span>>
<<span class="pl-ent">input</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text<span class="pl-pds">"</span></span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>values<span class="pl-pds">"</span></span> <span class="pl-e">delimiter</span>=<span class="pl-s"><span class="pl-pds">"</span>,<span class="pl-pds">"</span></span> <span class="pl-e">placeholder</span>=<span class="pl-s"><span class="pl-pds">"</span>delimited values<span class="pl-pds">"</span></span> <span class="pl-e">value</span>=<span class="pl-s"><span class="pl-pds">"</span>foo,bar,john-doe<span class="pl-pds">"</span></span>>
<<span class="pl-ent">select</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>cars<span class="pl-pds">"</span></span>>
<<span class="pl-ent">option</span>>Lamborghini</<span class="pl-ent">option</span>>
<<span class="pl-ent">option</span>>Porsche</<span class="pl-ent">option</span>>
<<span class="pl-ent">option</span>>Maybach</<span class="pl-ent">option</span>>
</<span class="pl-ent">select</span>>
</<span class="pl-ent">div</span>>
</<span class="pl-ent">div</span>>
</<span class="pl-ent">div</span>>
</<span class="pl-ent">div</span>></pre></div>
<h3><a id="user-content-example-call-to-the-divers-function" class="anchor" href="#example-call-to-the-divers-function" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example call to the diver's function</h3>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> obj <span class="pl-k">=</span> <span class="pl-smi">diver</span>.<span class="pl-en">traverse</span>(<span class="pl-s"><span class="pl-pds">'</span>container-top<span class="pl-pds">'</span></span>,{});</pre></div>
<h3><a id="user-content-output" class="anchor" href="#output" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Output</h3>
<div class="highlight highlight-source-json"><pre>{
<span class="pl-s"><span class="pl-pds">"</span>personal_details<span class="pl-pds">"</span></span>: {
<span class="pl-s"><span class="pl-pds">"</span>isChecked<span class="pl-pds">"</span></span> : <span class="pl-s"><span class="pl-pds">"</span>false<span class="pl-pds">"</span></span>,
<span class="pl-s"><span class="pl-pds">"</span>first_name<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>cafebabe<span class="pl-pds">"</span></span>,
<span class="pl-s"><span class="pl-pds">"</span>last_name<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>1991<span class="pl-pds">"</span></span>,
<span class="pl-s"><span class="pl-pds">"</span>values<span class="pl-pds">"</span></span>:[<span class="pl-s"><span class="pl-pds">"</span>foo<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>bar<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>john-doe<span class="pl-pds">"</span></span>],
<span class="pl-s"><span class="pl-pds">"</span>age<span class="pl-pds">"</span></span>: {
<span class="pl-s"><span class="pl-pds">"</span>age<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>21<span class="pl-pds">"</span></span>
},
<span class="pl-s"><span class="pl-pds">"</span>email<span class="pl-pds">"</span></span>: {
<span class="pl-s"><span class="pl-pds">"</span>email_id<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>[email protected]<span class="pl-pds">"</span></span>
}
},
<span class="pl-s"><span class="pl-pds">"</span>cars<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>Lamborghini<span class="pl-pds">"</span></span>
}</pre></div>
</article>