파일 가져 오기 미리보기

Question

사용자의 트랜잭션을 가져 오는이 양식이 있습니다. 사용자가 자신의 계정으로 가져올 거래 목록을 미리 볼 수있는 양식을 개선했습니다.

샘플 :

위의 샘플 미리보기가 나는 성공적으로 수행 한 QIF 파일 형식입니다.

이제 OFX 파일 형식을 미리 보려고하는데 테이블에 정렬하고 정확한 값을 얻는 데 어려움이 있습니다.

<input type="file" name="transactions" id="id_transactions"> 

<div style="display:none;width:335px;" id="preview-box"> 
    <h4 class="thin" class="black">Import Preview</h4> 

    <table class="simple-table responsive-table footable"> 
     <thead> 
      <tr> 
       <th scope="col" width="10%"><small class="black">Date</small></th> 
       <th scope="col" width="10%"><small class="black">Amount</small></th> 
       <th scope="col" width="20%"><small class="black">Payee</small></th> 
      </tr> 
     </thead> 
    </table> 

    <div class="scrollable" style="height:100px"> 
     <table class="simple-table responsive-table footable"> 
      <tbody id="preview-table"></tbody> 
     </table> 
    </div><br/> 
</div> 

<script> 
    $('#id_transactions').change(function() { 
     var upload = document.getElementById('id_transactions') 
     var files = upload.files 
     if (files != undefined) { 
      var reader = new FileReader(); 

      reader.onload = function(e) { 
       var extension = upload.value.split('.').pop().toLowerCase() 
       var lineSplit = e.target.result.split("\n"); 
       var payee = '' 
       var date 
       var amount 
       var content = ""; 
       var content1 = ""; 
       var content2 = ""; 

       if(extension == "qif"){ 
        // for qif preview 
       }else if(extension == "ofx"){ 
        $('#preview-box').show(500) 

        for(var i = 1; i < lineSplit.length; i++) { 
         //I'm stuck here.... 
        } 
       } 

       $('#preview-table').html(content); 
      }; 
      reader.readAsText(files.item(0)); 
     } 
    }); 
</script> 

sample.ofx 이미이 일을

OFXHEADER:100 
DATA:OFXSGML 
VERSION:103 
SECURITY:NONE 
ENCODING:USASCII 
CHARSET:1252 
COMPRESSION:NONE 
OLDFILEUID:NONE 
NEWFILEUID:NONE 

<OFX> 
    <SIGNONMSGSRSV1> 
    <SONRS> 
     <STATUS> 
     <CODE>0 
     <SEVERITY>INFO 
     </STATUS> 
     <DTSERVER>20071015021529.000[-8:PST] 
     <LANGUAGE>ENG 
     <DTACCTUP>19900101000000 
     <FI> 
     <ORG>MYBANK 
     <FID>
     </FI> 
    </SONRS> 
    </SIGNONMSGSRSV1> 
    <BANKMSGSRSV1> 
     <STMTTRNRS> 
     <TRNUID>23382938 
     <STATUS> 
      <CODE>0 
      <SEVERITY>INFO 
     </STATUS> 
     <STMTRS> 
      <CURDEF>USD 
      <BANKACCTFROM> 
      <BANKID>987654321 
      <ACCTID>098-121 
      <ACCTTYPE>SAVINGS 
      </BANKACCTFROM> 
      <BANKTRANLIST> 
      <DTSTART>20070101 
      <DTEND>20071015 
      <STMTTRN> 
       <TRNTYPE>CREDIT 
       <DTPOSTED>20070315 
       <DTUSER>20070315 
       <TRNAMT>200.00 
       <FITID>980315001 
       <NAME>DEPOSIT 
       <MEMO>automatic deposit 
      </STMTTRN> 
      <STMTTRN> 
       <TRNTYPE>CREDIT 
       <DTPOSTED>20070329 
       <DTUSER>20070329 
       <TRNAMT>150.00 
       <FITID>980310001 
       <NAME>TRANSFER 
       <MEMO>Transfer from checking 
      </STMTTRN> 
      <STMTTRN> 
       <TRNTYPE>PAYMENT 
       <DTPOSTED>20070709 
       <DTUSER>20070709 
       <TRNAMT>-100.00 
       <FITID>980309001 
       <CHECKNUM>1025 
       <NAME>John Hancock 
      </STMTTRN> 
      </BANKTRANLIST> 
      <LEDGERBAL> 
      <BALAMT>5250.00 
      <DTASOF>20071015021529.000[-8:PST] 
      </LEDGERBAL> 
      <AVAILBAL> 
      <BALAMT>5250.00 
      <DTASOF>20071015021529.000[-8:PST] 
      </AVAILBAL> 
     </STMTRS> 
     </STMTTRNRS> 
    </BANKMSGSRSV1> 
</OFX> 

사람 :

여기 내 코드입니다?

UPDATE :

출력 :

Answer 1

당신이 OFX 파일 형식이 두 부분을 분리 빈 줄, 두 번째 부분에서 XML처럼 많이 보이는 것을 알고 (내가 틀렸다면 정정해라, 나는이 형식을 모른다).

var ofxParts = e.result.split("\r?\n\r?\n"), ofxHeaders, ofxDocument; 

ofxHeaders = JSON.parse("{" 
    + ofxParts[0].replace(/(\w+) *: *(\w*)/g, "\"$1\": \"$2\"") 
     .replace(/\r?\n/g, ", ") + "}"); 

ofxDocument = new DOMParser().parseFromString(ofxParts[1] 
     .replace(/<(\w+)>(?!\n|\r\n)(.*)/g, "<$1>$2</$1>")); 

지금이 같은 유용한 자바 스크립트 객체의 OFX 헤더가 있어야합니다 다음 onload 이벤트 리스너 내부

, 이런 식으로 뭔가를 시도

ofxHeaders = { 
    "OFXHEADER": "100", 
    "DATA": "OFXSGML", 
    "VERSION": "103", 
    "SECURITY": "NONE", 
    "ENCODING": "USASCII", 
    "CHARSET": "1252", 
    "COMPRESSION": "NONE", 
    "OLDFILEUID": "NONE", 
    "NEWFILEUID": "NONE" 
}; 

당신은 기어를 선택 할 수 있습니다 다른 XML과 마찬가지로 OFX 문서에 document.evaluate을 추가하십시오.

FileReader을 사용하는 경우에는 모두 사용 가능해야합니다. document.evaluate을 지원하지 않는 IE10은 예외입니다. XPath를 사용하려면 ActiveXObject을 만들고 loadXML을 사용해야합니다.

아니면 그냥 사용할 수있는 jQuery를 :

이

var $ofx = $.parseXML(ofxParts[1].replace(/<(\w+)>(?!\n|\r\n)(.*)/g, "<$1>$2</$1>")); 

편집 : 이제 방법은 이런 종류의 테이블에 행을 만들 수 있습니다

var $xfers = $ofx.find("STMTTRN"); 

content = $xfers.map(function(xf) { 
    var $xf = $(xf), date = $xf.find("DTPOSTED").text(); 
    return "<tr><td>" + date.substring(4, 6) + "/" + date.substring(6) 
     + "/" + date.substring(0, 4) + "<td></td>" + $xf.find("NAME").text() 
     + "</td><td>" + $xf.find("TRNAMT").text() + "</td></tr>"; 
}).join("");