Dynamic-File-Download/coding_challenge.html at master · dxjdqc/Dynamic-File-Download · 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>
	<head>
		<meta charset="utf-8">
		<title>Dynomic file download</title>
		<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="functions.js"></script>
	</head>
	<body>
		<h3> Dynomic file download</h3>
		<button id="bt_load-the-page">Display</button>
		<button id="btnDownload">Download</button>
		<div id="siteloader"></div>
		<div id="container"></div>
		<script>
		/* Date: December 10th, 2016
		   Name: functions.js
		   Description: this ccontains functions to disply and download dat from url
		*/

		// This is the global variable which stores the data downloaded
			var countryData = [];

		 // For cross domain applications
			$.ajaxPrefilter( function (options) {
			  if (options.crossDomain && jQuery.support.cors) {
				var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
				options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
				//options.url = "http://cors.corsproxy.io/url=" + options.url;
			  }
			});
			// download the data and form as table and display
			$("#bt_load-the-page").on("click",function(){
				var request = $.ajax({
					url: "http://pastebin.com/raw/943PQQ0n",
					method: "GET",
				});

				request.done(function( msg ) {
					countryData = parseData(msg);
					var tbl = '<table border="1" align="left" bgcolor="Azure"><tr><th>Code</th><th> Name </th></tr>'
					var ks = msg.split("\n");
					$.each(ks, function(k){
						if(k >3){
							var rowData = ks[k].split(/\s+/);
							tbl = tbl + '<tr><td>'+ rowData[0] + '</td><td>' + rowData[1] + '</td></tr>'
						}
					});
					tbl = tbl + '</table>'
					$("#siteloader").html(tbl);
				});
				request.fail(function( jqXHR, textStatus ) {
					alert( "Request failed: " + textStatus );
				});
			});

		//Downloading the data as CSV
			$("#btnDownload").on("click",function(){

				ConvertToCSV(countryData)
			});

			function ConvertToCSV(JSONData) {
			  //Parsing the data as JSON data
			  var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
			  var CSV = '';

			  //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 = "Countries";

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

			  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);
			}

			function  parseData(data){
			  var formattedData = [];
			  var ks = data.split("\n");
			   $.each(ks, function(k){
				if(k >3){
				  var rowData = ks[k].split(/\s+/);
				  var country = {
					code : rowData[0],
					name : rowData[1]
				  }
				  formattedData.push(country);
				}
			  });

			  return formattedData;
			}
		//End of the functions
		</script>
	</body>
</html>