-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathjsonextract.html
138 lines (126 loc) · 4.73 KB
/
jsonextract.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Key Viewer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
background-color: #ffc7e4;
}
#container {
flex: 1;
display: flex;
flex-direction: column;
padding: 32px;
}
#dropZone {
border: 4px dashed #ba6792;
padding: 24px;
text-align: center;
margin: 20px 0;
border-radius: 10px;
background-color: #f9f9f9;
}
#keyList {
margin: 20px 0;
max-height: 20%;
overflow-y: auto;
}
#keyList button {
margin: 5px;
border: 1px solid #694959;
border-radius: 4px;
}
#valuesBox {
flex: 1;
width: 100%;
resize: none;
}
</style>
</head>
<body>
<div id="container">
<h2><div id="dropZone">Feed me a JSON File</div></H2>
<h3>Keys:</h3>
<div id="keyList"></div>
<h3>Values:</h3>
<textarea id="valuesBox" readonly></textarea>
</div>
<script>
const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', (event) => {
event.preventDefault();
dropZone.style.borderColor = '#0b94ca';
dropZone.innerHTML = 'Drop it!';
});
dropZone.addEventListener('dragleave', () => {
dropZone.style.borderColor = '#ba6792';
dropZone.innerHTML = 'Feed me a JSON File';
});
dropZone.addEventListener('drop', (event) => {
event.preventDefault();
const file = event.dataTransfer.files[0];
if (file && file.type === "application/json") {
processFile(file);
} else {
alert('Not a JSON file.');
dropZone.innerHTML = 'Feed me a *VALID* JSON File';
}
});
function processFile(file) {
const reader = new FileReader();
reader.onload = function(e) {
const content = e.target.result;
try {
const jsonData = JSON.parse(content);
const allKeys = new Set();
const valuesMap = {};
function extractKeysAndValues(obj) {
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
const value = obj[key];
if (typeof value === 'string' || typeof value === 'number') {
allKeys.add(key);
if (!valuesMap[key]) {
valuesMap[key] = [];
}
valuesMap[key].push(value);
} else if (typeof value === 'object' && value !== null) {
extractKeysAndValues(value);
}
}
}
}
extractKeysAndValues(jsonData);
const keyListDiv = document.getElementById('keyList');
keyListDiv.innerHTML = '';
allKeys.forEach(key => {
const keyButton = document.createElement('button');
keyButton.textContent = `${key} (${valuesMap[key].length})`;
keyButton.addEventListener('click', () => {
document.getElementById('valuesBox').value = valuesMap[key].join('\n');
});
keyListDiv.appendChild(keyButton);
});
dropZone.innerHTML = 'Thanks!';
dropZone.style.borderColor = '#07ee92';
setTimeout(() => {
dropZone.innerHTML = `Showing contents of \"${file.name}\"`;
dropZone.style.borderColor = '#ba6792';
}, 500);
} catch (error) {
alert('Invalid JSON file.');
dropZone.innerHTML = 'Feed me a *VALID* JSON File';
dropZone.style.borderColor = '#bc0000';
}
};
reader.readAsText(file);
}
</script>
</body>
</html>