JSFiddle - React, Tailwind, and code Playground

Amex to CSV

by Jens Schyma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>AMEX processing</p>
  <div>
  On the AMEX page https://global.americanexpress.com/transactions?BPIndex=10
  when you switch the month 
  https://global.americanexpress.com/api/servicing/v1/financials/transactions is called -> check via the browser tab in chrome
  </div>
  <textarea id="input"></textarea>
  <br></br>
  <button id="btn_proc">Process</button>
  <table id="result">
    <tr><th>Abr.</th><th>For Month</th><th>Comment</th></tr>
  </table>
  <button id="btn_download">Download CSV</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}


// month
var month ={
	'Januar': '01',
	'Februar': '02',
	'März': '03',
  'April': '04',
  'Mai': '05',
  'Juni': '06',
  'Juli': '07',
  'August': '08',
  'September':'09',
  'Oktober':'10',
  'November': '11',
  'Dezember': '12'
};
var processed_list = {};
var resultList = [];
// find elements
var banner = $("#banner-message")
var button = $("#btn_proc")

// handle click and add class
button.on("click", function(){
  $(".cmt_result").text("");
  var input = $("#input").val();
  if(input!==""){
		let m;
		debugger;
		var cnt_all = 0;
		var cnt_err = 0;
    var json = JSON.parse(input);
    for(var i=0;i!=json.transactions.length;i++){
    		
        if(processed_list[json.transactions[i].statement_end_date]===undefined){
    	    var tr = document.createElement("tr");
          var td1 = document.createElement("td");
          var td2 = document.createElement("td");
          var td3 = document.createElement("td");
          $("#result").append(tr);
          $(tr).append(td1);
          $(tr).append(td2);
          $(tr).append(td3);
          $(td1).text(json.transactions[i].statement_end_date);
          $(td2).text("");
          $(td3).text("newly added").addClass("cmt_result");
      		processed_list[json.transactions[i].statement_end_date] = $(td3);
        }
    		
        resultList.push([
        	json.transactions[i].description,
          json.transactions[i].charge_date,
          json.transactions[i].amount,
        	json.transactions[i].statement_end_date,
          json.transactions[i].type,
         ...