jsonParser/index.html at master · hackmoore/jsonParser · GitHub

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
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="Ed Moore">

        <title>JSON Parser</title>

        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
        <h2 align="center">JSON Parser <p class="version">v1.1</p></h2>

        <div class="container">
            <h3>Intro.</h3>
            <p>This is a small web-base service that allows users to provide a json file which is then parsed and filtered on the client side. No data is ever transmitted outside of your browser.</p>

            <div class="row">
                <div class="col-sm-12">
                    <h4>1. File upload <i id="step1" class="fas d-none fa-check text-success"></i></h4>
                    <div class="input-group custom-search-form">
                        <input type="file" class="form-control" id="jsonFile" autofocus placeholder="Select your JSON file here" accept=".json">
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="button" onClick="processJsonFile();">
                                <span class="fas fa-file-upload"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <h4>2. Filter Path <i id="step2" class="fas d-none fa-check text-success"></i></h4>
                    <div class="input-group custom-search-form">
                        <input type="text" class="form-control" id="filterPath" placeholder="body">
                        <div class="input-group-append">
                            <button class="btn btn-primary disabled" disabled id="btn-step2" type="button" onClick="applyPathing();">
                                <span class="fas fa-cog"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <h4>3. Fields to display <i id="step3" class="fas d-none fa-check text-success"></i></h4>
                    <!-- Select fields -->
                    <section id="section-select" class="overflow-auto" style="max-height: 500px;">
                        <p class="text-muted">Please upload a file first...</p>
                    </section>

                </div>
                <div class="col-sm-6">
                    <!-- Filter fields -->
                    <h4>4. Filter by <i id="step4" class="fas d-none fa-check text-success"></i></h4>
                    <section id="section-filter" class="overflow-auto" style="max-height: 500px;">
                        <p class="note">Fields are matched using Rexeg (also case sensitive). Some good examples are available <a href="https://medium.com/factory-mind/regex-tutorial-a-simple-cheatsheet-by-examples-649dc1c3f285" target="_blank">here</a>.<br>You can use a <code>.*</code> for a wildcard match.</p>
                        <div class="form-row">
                            <div class="col"><select trigger="filterText" triggerid="select-filterText0" id="select-filter0"><option>Please select a file first...</option></select></div> LIKE
                            <div class="col"><input type="text" id="select-filterText0" disabled></div>

                        </div>
                        <div class="form-row">
                            <div class="col"><select trigger="filterText" triggerid="select-filterText1" id="select-filter1"><option>Please select a file first...</option></select></div> LIKE
                            <div class="col"><input type="text" id="select-filterText1" disabled></div>

                        </div>
                        <div class="form-row">
                            <div class="col"><select trigger="filterText" triggerid="select-filterText2" id="select-filter2"><option>Please select a file first...</option></select></div> LIKE
                            <div class="col"><input type="text" id="select-filterText2" disabled></div>

                        </div>
                    </section>
                </div>
            </div>

            <div class="row mt-2">
                <div class="col-sm-12 overflow-auto">
                    <h4>5. Process Data <i id="step5" class="fas d-none fa-check text-success"></i></h4>
                    <section id="section-results">
                        <div class="text-center">
                            <button class="btn btn-primary disabled" disabled id="btn-step5" type="button" onClick="filterData();"><span class="fas fa-cog"></span> Process Data</button>
                        </div>
                        <table id="results" class="table  mt-1">
                            <thead>

                            </thead>

                            <tbody>

                            </tbody>
                        </table>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <p class="disclaimer">This site is not affiliated with anyone.<br>The data used to produce this page is publically available and is provided here with no warranty.<br/>For feedback please contact ed(at)ed-moore.net</p>
        </div>


        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />


        <script type="text/javascript" src="filter.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>