-
Notifications
You must be signed in to change notification settings - Fork 46
/
json-to-csv-converter.html
197 lines (188 loc) · 9.38 KB
/
json-to-csv-converter.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
---
title: JSON Data To CSV File Format Converter | Developer Tools
layout: post
---
<html>
<head>
<!-- Meta tags common for website -->
{% include common-meta %}
<title>{{ page.title }}</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="description" content="This is easy to use open source tool to convert JSON data to csv file entry format. " />
<meta name="keywords" content="online,tool,json,csv,comma,separated,convert,converter,web,opensource" />
<!-- CSS for the site theme -->
{% include theme-css %}
<!-- Annoying IE fixes -->
{% include ie-fixes %}
</head>
<body class="hold-transition skin-green sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
<!-- header tag from theme -->
{% include theme-header %}
<!-- Sidebar for the whole website -->
{% include theme-sidebar %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<div class="row">
<!-- left column -->
<div class="col-md-6">
<div class="box box-success">
<div class="box-header with-border">
<h1 class="box-title">Convert JSON Data To CSV Format</h1>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class="box-body">
<form role="form">
<div class="form-group">
<label for="csv">JSON Data</label>
<textarea class="form-control" rows="10" id="json" placeholder="Enter your JSON Data here" autofocus></textarea>
<div style="display:hidden;">
<div id="hidden" style="display:hidden;"></div>
</div>
</div>
</form>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="row">
<div class="col-xs-3">
<button type="button" class="btn btn-info" id="generate">Convert to CSV</button>
</div>
</div>
</div>
<!-- /.box-footer -->
</div>
</div>
<div class="col-md-6">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Copy Your CVS File Format Data From Here</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="form-group">
<label for="json">CSV Format Converted Data</label>
<textarea class="form-control" id="csvValues" rows="10"></textarea>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">About JSON to CSV format Converter Tool</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<img class="img-responsive" src="images/json2csv.png" alt="JSON to CSV format converter tool" title="JSON to CSV format converter tool">
<p>This is a free online tool to convert a JSON formatted data to csv file format. This can be useful for automation testing of REST based services. You can convert any JSON data to CSV or spreadsheet format using this tool. CSV Files can be easily opened in popular tools like Microsoft Excel and Google Spreadsheets.</p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">What is a JSON?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>JSON (JavaScript Object Notation) is a popular format used to transfer data between applications. It is very common object format in web applications. JavaScript applications do not require any speciall handling for this type of data since its is already an object of javascript format. </p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">What is a CSV format?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>CSV files are common way to store spreadsheet data. </p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Why Convert From JSON to CSV file format?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<img class="img-responsive" src="images/json-to-csv.png" alt="Tool Snapshot JSON to CSV format converter tool" title="Tool Snapshot JSON to CSV format converter tool">
<p>CSV files are easy to read and can contain entries that can be easily seen in tools like Microsoft Excell, Mac OS Numbers and Google Spreadsheets. </p>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Why Do We Need A JSON to CSV Format Converter Online?</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<p>The online converter is a good help for automation testing of REST based services. This tool can be handy since you just need to paste the JSON response in the input field and hit convert button. </p>
<p>The same task can be done manually, however it can be cumbersome. This tool can save you some time and follow a consistent pattern in organized sheet.</p>
<p>You just need to copy and paste the JSON data into this tool and get the csv format data, each field in JSON becomes a column header.</p>
<p>Many times, we do not want to parse the full JSON since only small part of the data is used. In that case this tool can help you hand pick the fields you are interseted in.</p>
</div>
<!-- /.box-body -->
</div>
</section>
{% include addthis %}
</div>
<!-- /.content-wrapper -->
{% include theme-footer %}
</div>
<!-- ./wrapper -->
{% include theme-bottom-js %}
</body>
<script src="plugins/selectOnFocus/jquery.selectOnFocus.min.js"></script>
<script src="javascripts/json2csv.js"></script>
<script>
$(document).ready(function() {
$("#json").selectOnFocus();
$("#csvValues").selectOnFocus();
$('#converters-category').addClass('active');
$("#generate").click(function() {
var start = performance.now();
$("#generate").html('Generating...Please Wait...');
$("#generate").prop('disabled', true);
var text = $("#json").val();
if(text) {
try {
var obj = JSON.parse(text,"");
traverseBoth(obj,"",formatJsonPropMappings);
}
catch(error) {
console.log(error);
}
const header = [...csvMap.keys()];
const values = [...csvMap.values()];
const sizes = values.map(v => v.length);
const maxRows = Math.max(...sizes);
const rows = [];
rows.push(header.join(','));
for(let i = 0; i < maxRows; i++) {
const row = [];
csvMap.forEach((v, k, map) => {
let cellValue = '';
if(v && Array.isArray(v) && v.length > i) {
cellValue = v[i];
}
row.push(cellValue);
});
rows.push(row.join(','));
}
$("#csvValues").val(rows.join('\n'));
}
$("#generate").prop('disabled', false);
$("#generate").html('Convert to CSV');
//clear up globals
csvMap.clear();
});
});
</script>
</html>