richard512 · April 11, 2017 07:07
diff --git a/json-js-array-to-csv.htm b/json-js-array-to-csv.htm

 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <meta name="robots" content="noindex, nofollow">
 <meta name="googlebot" content="noindex, nofollow">










 <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>




  <link rel="stylesheet" type="text/css" href="/css/normalize.css">





  <link rel="stylesheet" type="text/css" href="/css/result-light.css">




 <style type="text/css">
  .txtarea{
  max-width:100%;
  min-height:200px;    
  display:block;
  width:100%;
 }

 .mydiv{
  padding:10px;
 }

 .gen_btn{
  padding:5px;
  background-color:#743ED9;
  color:white;
  font-family:arial;
  font-size:13px;
  border:2px solid black;
 }

 .gen_btn:hover{
  background-color:#9a64ff;
 }
 </style>

 <title>JSON to CSV/Excel Convert</title>







 <script type='text/javascript'>//<![CDATA[
 $(window).load(function(){
 $(document).ready(function(){
 $('#json').click(function(){
  var data = $('#txt').val();
  if(data == '')
    return;

  JSONToCSVConvertor(data, "Vehicle Report", true);
 });

 $('#keyval').click(function(){
  var data = $('#txt').val();
  if(data == '')
    return;

  yy = []
  for (i in xx){
    thing = {'key':i, 'value':xx[i]}
    yy.push(thing)
  }

  JSONToCSVConvertor(data, "keyval", true);
 });
  
  
 $('#flipkey').click(function(){
    var data = $('#txt').val();
  if(data == '')
    return;
  
  flipped = flipKeyValue(data)
  $('#txt').val(flipped);
 });
  
 });



 function flipKeyValue(xx){
 yy = {}
 for (i in xx){
 //console.log(xx[i], i)
 yy[xx[i]] = i
 }
 return yy
 }

 function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
 //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
 var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

 var CSV = '';    
 //Set Report title in first row or line

 CSV += '';

 //This condition will generate the Label/Header
 if (ShowLabel) {
  var row = "";

  //This loop will extract the label from 1st index of on array
  for (var index in arrData[0]) {

    //Now convert each value to string and comma-seprated
    row += index + ',';
  }

  row = row.slice(0, -1);

  //append Label row with line break
  CSV += row + '\r\n';
 }

 //1st loop is to extract each row
 for (var i = 0; i < arrData.length; i++) {
  var row = "";

  //2nd loop will extract each column and convert it in string comma-seprated
  for (var index in arrData[i]) {
    row += '"' + arrData[i][index] + '",';
  }

  row.slice(0, row.length - 1);

  //add a line break after each row
  CSV += row + '\r\n';
 }

 if (CSV == '') {        
  alert("Invalid data");
  return;
 }   

 //Generate a file name
 var fileName = "";
 //this will remove the blank-spaces from the title and replace it with an underscore
 fileName += ReportTitle.replace(/ /g,"_");   

 //Initialize file format you want csv or xls
 var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

 // Now the little tricky part.
 // you can use either>> window.open(uri);
 // but this will not work in some browsers
 // or you will not get the correct file extension    

 //this trick will generate a temp <a /> tag
 var link = document.createElement("a");    
 link.href = uri;

 //set the visibility hidden so it will not effect on your web-layout
 link.style = "visibility:hidden";
 link.download = fileName + ".csv";

 //this part will append the anchor tag and remove it after automatic click
 document.body.appendChild(link);
 link.click();
 document.body.removeChild(link);
 }
 });//]]> 

 </script>


 </head>

 <body>
 <div class='mydiv'>    
  <textarea id="txt" class='txtarea'>[{"Vehicle":"BMW","Date":"30, Jul 2013 09:24 AM","Location":"Hauz Khas, Enclave, New Delhi, Delhi, India","Speed":42},{"Vehicle":"Honda CBR","Date":"30, Jul 2013 12:00 AM","Location":"Military Road,  West Bengal 734013,  India","Speed":0},{"Vehicle":"Supra","Date":"30, Jul 2013 07:53 AM","Location":"Sec-45, St. Angel's School, Gurgaon, Haryana, India","Speed":58},{"Vehicle":"Land Cruiser","Date":"30, Jul 2013 09:35 AM","Location":"DLF Phase I, Marble Market, Gurgaon, Haryana, India","Speed":83},{"Vehicle":"Suzuki Swift","Date":"30, Jul 2013 12:02 AM","Location":"Behind Central Bank RO, Ram Krishna Rd by-lane, Siliguri, West Bengal, India","Speed":0},{"Vehicle":"Honda Civic","Date":"30, Jul 2013 12:00 AM","Location":"Behind Central Bank RO, Ram Krishna Rd by-lane, Siliguri, West Bengal, India","Speed":0},{"Vehicle":"Honda Accord","Date":"30, Jul 2013 11:05 AM","Location":"DLF Phase IV, Super Mart 1, Gurgaon, Haryana, India","Speed":71}]</textarea>
  <button id='json' class='gen_btn'>JSON to CSV</button>
  <button id='flipkey' class='gen_btn'>Flip Key-Value</button>
  <button id='keyval' class='gen_btn'>Key-Value to CSV</button>
 </div>

 <script>
 // tell the embed parent frame the height of the content
 if (window.parent && window.parent.parent){
  window.parent.parent.postMessage(["resultsFrame", {
    height: document.body.getBoundingClientRect().height,
    slug: "None"
  }], "*")
 }
 </script>

 </body>

 </html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="robots" content="noindex, nofollow">
	<meta name="googlebot" content="noindex, nofollow">










	<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>




	<link rel="stylesheet" type="text/css" href="/css/normalize.css">





	<link rel="stylesheet" type="text/css" href="/css/result-light.css">




	<style type="text/css">
	.txtarea{
	max-width:100%;
	min-height:200px;
	display:block;
	width:100%;
	}

	.mydiv{
	padding:10px;
	}

	.gen_btn{
	padding:5px;
	background-color:#743ED9;
	color:white;
	font-family:arial;
	font-size:13px;
	border:2px solid black;
	}

	.gen_btn:hover{
	background-color:#9a64ff;
	}
	</style>

	<title>JSON to CSV/Excel Convert</title>







	<script type='text/javascript'>//<![CDATA[
	$(window).load(function(){
	$(document).ready(function(){
	$('#json').click(function(){
	var data = $('#txt').val();
	if(data == '')
	return;

	JSONToCSVConvertor(data, "Vehicle Report", true);
	});

	$('#keyval').click(function(){
	var data = $('#txt').val();
	if(data == '')
	return;

	yy = []
	for (i in xx){
	thing = {'key':i, 'value':xx[i]}
	yy.push(thing)
	}

	JSONToCSVConvertor(data, "keyval", true);
	});


	$('#flipkey').click(function(){
	var data = $('#txt').val();
	if(data == '')
	return;

	flipped = flipKeyValue(data)
	$('#txt').val(flipped);
	});

	});



	function flipKeyValue(xx){
	yy = {}
	for (i in xx){
	//console.log(xx[i], i)
	yy[xx[i]] = i
	}
	return yy
	}

	function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
	//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
	var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

	var CSV = '';
	//Set Report title in first row or line

	CSV += '';

	//This condition will generate the Label/Header
	if (ShowLabel) {
	var row = "";

	//This loop will extract the label from 1st index of on array
	for (var index in arrData[0]) {

	//Now convert each value to string and comma-seprated
	row += index + ',';
	}

	row = row.slice(0, -1);

	//append Label row with line break
	CSV += row + '\r\n';
	}

	//1st loop is to extract each row
	for (var i = 0; i < arrData.length; i++) {
	var row = "";

	//2nd loop will extract each column and convert it in string comma-seprated
	for (var index in arrData[i]) {
	row += '"' + arrData[i][index] + '",';
	}

	row.slice(0, row.length - 1);

	//add a line break after each row
	CSV += row + '\r\n';
	}

	if (CSV == '') {
	alert("Invalid data");
	return;
	}

	//Generate a file name
	var fileName = "";
	//this will remove the blank-spaces from the title and replace it with an underscore
	fileName += ReportTitle.replace(/ /g,"_");

	//Initialize file format you want csv or xls
	var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

	// Now the little tricky part.
	// you can use either>> window.open(uri);
	// but this will not work in some browsers
	// or you will not get the correct file extension

	//this trick will generate a temp <a /> tag
	var link = document.createElement("a");
	link.href = uri;

	//set the visibility hidden so it will not effect on your web-layout
	link.style = "visibility:hidden";
	link.download = fileName + ".csv";

	//this part will append the anchor tag and remove it after automatic click
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
	}
	});//]]>

	</script>


	</head>

	<body>
	<div class='mydiv'>
	<textarea id="txt" class='txtarea'>[{"Vehicle":"BMW","Date":"30, Jul 2013 09:24 AM","Location":"Hauz Khas, Enclave, New Delhi, Delhi, India","Speed":42},{"Vehicle":"Honda CBR","Date":"30, Jul 2013 12:00 AM","Location":"Military Road, West Bengal 734013, India","Speed":0},{"Vehicle":"Supra","Date":"30, Jul 2013 07:53 AM","Location":"Sec-45, St. Angel's School, Gurgaon, Haryana, India","Speed":58},{"Vehicle":"Land Cruiser","Date":"30, Jul 2013 09:35 AM","Location":"DLF Phase I, Marble Market, Gurgaon, Haryana, India","Speed":83},{"Vehicle":"Suzuki Swift","Date":"30, Jul 2013 12:02 AM","Location":"Behind Central Bank RO, Ram Krishna Rd by-lane, Siliguri, West Bengal, India","Speed":0},{"Vehicle":"Honda Civic","Date":"30, Jul 2013 12:00 AM","Location":"Behind Central Bank RO, Ram Krishna Rd by-lane, Siliguri, West Bengal, India","Speed":0},{"Vehicle":"Honda Accord","Date":"30, Jul 2013 11:05 AM","Location":"DLF Phase IV, Super Mart 1, Gurgaon, Haryana, India","Speed":71}]</textarea>
	<button id='json' class='gen_btn'>JSON to CSV</button>
	<button id='flipkey' class='gen_btn'>Flip Key-Value</button>
	<button id='keyval' class='gen_btn'>Key-Value to CSV</button>
	</div>

	<script>
	// tell the embed parent frame the height of the content
	if (window.parent && window.parent.parent){
	window.parent.parent.postMessage(["resultsFrame", {
	height: document.body.getBoundingClientRect().height,
	slug: "None"
	}], "*")
	}
	</script>

	</body>

	</html>