AnirbanKundu/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <title>
    Translation App
  </title>
  <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="module">
  <h3> JSON --> Excel !</h3>
  <br/>
  <h4>Please select the JSON file to be converted.</h4>
  <br/>
  <p>
    The uploaded file should be of the following format
  </p>
  <p>
    <code style="color:green">
      {
        "request":"translations",
        "response": {
          "status":200,
          "content": {
           "HEADLINE": "What an awesome module!",
      	 "SITE_PAGE_HEADER" : "Power Conversion Fleet"
          }
        }
      }
    </code>
  </p>
   <p>
    <input type="file" id="inputFile" name="file" enctype="multipart/form-data" />
  </p>
</div>
</body>

</html>

## script.js
// Code goes here
$(document).ready(function() {

  $('#inputFile').change(function(evt) {
    var files = evt.target.files;
    var file = files[0];
    var reader = new FileReader();
    reader.onload = function() {
      //console.log(this.result);
      JSONToCSVConvertor(JSON.parse(this.result), "Traslation Report", true);
    }
    reader.readAsText(file);
  });

  function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
    //The JSON file should have the following schema.
    /*
    {
      "request":"translations",
      "response": {
        "status":200,
        "content": {
         "HEADLINE": "What an awesome module!",
    	   "SITE_PAGE_HEADER" : "This is the main page"
        }
      }
    }
    */
    var arrData = JSONData.response.content;
    var CSV = '';
    //Set Report title in first row or line
    CSV += ReportTitle + '\r\n\n';
    for (var index in arrData) {
      var row = "";
      row += '"' + index + '",';
      row += '"' + arrData[index] + '",';
      row.slice(0, row.length - 1);
      CSV += row + '\r\n';
    }

    if (CSV == '') {
      alert("Invalid data");
      return;
    }
    //Generate a file name
    var fileName = "Report_";
    //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);
  }
});
	<!DOCTYPE html>
	<html>

	<head>
	<title>
	Translation App
	</title>
	<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
	<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<link rel="stylesheet" href="style.css" />
	<script src="script.js"></script>
	</head>

	<body>
	<div class="module">
	<h3> JSON --> Excel !</h3>
	<br/>
	<h4>Please select the JSON file to be converted.</h4>
	<br/>
	<p>
	The uploaded file should be of the following format
	</p>
	<p>
	<code style="color:green">
	{
	"request":"translations",
	"response": {
	"status":200,
	"content": {
	"HEADLINE": "What an awesome module!",
	"SITE_PAGE_HEADER" : "Power Conversion Fleet"
	}
	}
	}
	</code>
	</p>
	<p>
	<input type="file" id="inputFile" name="file" enctype="multipart/form-data" />
	</p>
	</div>
	</body>

	</html>
	// Code goes here
	$(document).ready(function() {

	$('#inputFile').change(function(evt) {
	var files = evt.target.files;
	var file = files[0];
	var reader = new FileReader();
	reader.onload = function() {
	//console.log(this.result);
	JSONToCSVConvertor(JSON.parse(this.result), "Traslation Report", true);
	}
	reader.readAsText(file);
	});

	function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
	//The JSON file should have the following schema.
	/*
	{
	"request":"translations",
	"response": {
	"status":200,
	"content": {
	"HEADLINE": "What an awesome module!",
	"SITE_PAGE_HEADER" : "This is the main page"
	}
	}
	}
	*/
	var arrData = JSONData.response.content;
	var CSV = '';
	//Set Report title in first row or line
	CSV += ReportTitle + '\r\n\n';
	for (var index in arrData) {
	var row = "";
	row += '"' + index + '",';
	row += '"' + arrData[index] + '",';
	row.slice(0, row.length - 1);
	CSV += row + '\r\n';
	}

	if (CSV == '') {
	alert("Invalid data");
	return;
	}
	//Generate a file name
	var fileName = "Report_";
	//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);
	}
	});