-1

多くの請求書データを含む csv ファイルをインポートしています。このデータは、ベンダー ID に基づいてグループ化して、各ベンダーの見出しをそのベンダー ID のすべての請求書の合計と共に表示する必要があります。また、その下に個々の請求書を表示します。このプロジェクトの目標は、CSV をインポートし、データをユーザーに表示し、選択ボックスを介して特定の値を変更できるようにし、ボタンをクリックして XML にエクスポートすることです。XML は HTML と同じように構造化されており、請求書の各グループごとに特定の共通データが最初に表示され、次に送金データが下に表示されます。これを実現するために、このhttp://goessner.net/download/prj/jsonxml/を使用して適切に XML に変換できるようにオブジェクトを構造化しようとしています。

問題: 2 番目の 2 つの支払いをグループ化する必要があります。詳細データの行ごとに配列を作成し、それをメイン オブジェクトの PmtDetail 属性に追加したいと考えています。現時点では、このコードは最初の行のみを広告し、残りは無視します。

CSV スニペット (ここのコードで使用されているすべての行は含まれていません)

 ID         CardCode   payment_sum    amount     
 1610165    BENV5271    100            100 
 1609026    BENV5635    509.85         287.33
 1609025    BENV5635    509.85         222.52 

JSON

 [{"DocNum":"1610165","CardCode":"BENV5271","InvPayAmnt":"100.00","PmntDate":"2012-03-29","payment_sum":"100.00"},
 {"DocNum":"1609026","CardCode":"BENV5635","InvPayAmnt":"287.33","PmntDate":"2012-03-29","payment_sum":"509.85"},  
 {"DocNum":"1609025","CardCode":"BENV5635","InvPayAmnt":"222.52","PmntDate":"2012-03-29","payment_sum":"509.85"}]

Jクエリ

 $(document).ready(function() {
    $.getJSON('CSV.php', function(data) {

    var prevCardCode = '';
    var newDiv; var NewDiv2;
var PaymentFormat;

    $.each(data, function(index, element) { //looping once to display header info such as sum
        XMLObject = []; // Creating a new object for each row     

        if (element['CardCode'] != prevCardCode) {

            XMLObject.Vendor_Sum = element['payment_sum'];
            XMLObject.Name1 = element['CardName'];
            XMLObject.Addr1 = element['Address'];

            console.log(XMLObject);

            newDiv = $('<div/>').addClass('row').appendTo('#showdata');
            $('<div class="sum_field">' + 'Total: ' + element['payment_sum'] + '</div>').appendTo(newDiv);

                $('<div class="options">Payment Format: <select name="Payment_Format" id="Payment_Format"><option value="CTX" selected="selected">Company to Company</option><option value="PPD">Company to Person</option></select> </div><div id="Selected_Format"></div>').appendTo(newDiv);

                XMLObject.paymentFormat = $('select#Payment_Format').val();;

                $('select#Payment_Format').change(function(){
                    PaymentFormat = $(this).val();
                    XMLObject.paymentFormat = PaymentFormat;
                });

        }

        newDiv2 = $('<div/>').addClass('sub_row').appendTo(newDiv);

        prevCardCode = element['CardCode'];

        $.each(element, function(key, value) { looping 2nd time to display the detail info
            XMLObjectDetail = {};   // Creating an array for each row of detail info

            XMLObjectDetail['TotalCurAmount'] = element['InvPayAmnt']; 
            XMLObjectDetail['NetCurAmount'] = element['InvPayAmnt'];

                   $('<div class="field">' + value + '</div>').appendTo(newDiv2);
                   XMLObject.PmtDetail =  XMLObjectDetail;
             });      
         });
     });
  });

PHP

 <?php 
  if (($handle = fopen('upload/BEN-new.csv', "r")) === FALSE) {
    die('Error opening file'); 
 }

 $headers = fgetcsv($handle, 1024, ',');
 $complete = array();

while ($row = fgetcsv($handle, 1024, ",")) {
       $complete[] = array_combine($headers, $row);
}
    fclose($handle);

    echo json_encode($complete);

?>

4

2 に答える 2

1

いくつかの考え:

  • $.each(data, ... //looping once to display header info such as sumあなたはどこにも合計を作成していません。dataまた、これはすべての行を反復する唯一のループです。
  • XMLObject = []; // Creating a new object for each row-いいえ、アレイを作成しています。オブジェクトとして使用するため、実際にはオブジェクト({})を作成する必要があります。
  • XMLObject =...varここにキーワードがありません。反復ごとに新しいオブジェクトを作成しますが、それらすべてを同じグローバル変数に割り当てます。#Payment_Formatこれが、変更ハンドラーが最後に作成されたオブジェクト(現在「」で参照されているオブジェクト)の形式のみを変更する理由XMLObjectです。
  • $('...<select name="Payment_Format" id="Payment_Format">...')反復ごとにIDを持つ選択を作成しています。idはどのように一意になると思いますか?そのため('select#Payment_Format')、現在の反復で作成された要素を選択しません。
  • $.each(element... looping 2nd time to display the detail infoいいえ。これは2番目のループではありませんが、現在のプロパティを反復処理するループです。elementループは、反復された各行に適用されますdata
  • XMLObjectDetail = {}; // Creating an array for each row of detail info-いいえ、オブジェクトを作成しています。繰り返しますが、varキーワードがありません。
  • (編集)XMLObject.PmtDetail = XMLObjectDetail;-ここで要素を繰り返すたびに「PmtDetail」プロパティを上書きします。それはあなたが追加する配列であるべきではありませんか?
  • ループコードの最後にXMLObject、現在の行に関するデータを含むがあります。たとえば、行オブジェクトの配列にプッシュするなど、何かを実行したくないですか?

OK、私は今あなたが達成しようとしていることを手に入れていると思います。適切な構造は次のとおりです。

[ {
    "CardCode":"BENV5271"
    "details": [ {
        "DocNum": "1610165",
        "InvPayAmnt": "100.00",
        "PmntDate": "2012-03-29"
      } ],
     "payment_sum": "100.00"
   }, {
     "CardCode": "BENV5635",
     "details": [ {
         "DocNum": "1609026"  
         "InvPayAmnt": "287.33",
         "PmntDate": "2012-03-29"
       }, {
         "DocNum": "1609025",
         "InvPayAmnt": "222.52",
         "PmntDate": "2012-03-29"
       } ],
     "payment_sum": "509.85"
    } ]

または同じ、idによるオブジェクト(key-value-map)と同じです:

{
    "BENV5271" : {
        "details": {
            "1610165": {
                 "InvPayAmnt": "100.00",
                 "PmntDate": "2012-03-29"
             }
         }
         "payment_sum": "100.00"
     },
     "BENV5635": {
         "details": {
             "1609026": {
                 "InvPayAmnt": "287.33",
                 "PmntDate": "2012-03-29"
             },
             "1609025": {
                 "InvPayAmnt": "222.52",
                 "PmntDate": "2012-03-29"
             }
        },
        "payment_sum": "509.85"
    }
}

文字列の代わりに、数値の値にJSONの数値タイプを使用することもできます:-)データベースからすぐにその構造を作成する必要があります。ご覧のとおり、CSVは最適な表現ではありません。また、JSONとXMLで表現できるため、SQL-> CSV-> JSON(table)-> JSON(structured)-> XMLではなく、SQL- > JSON(構造化)->XMLまたはさらに良いのはSQL->XMLです。Ajaxを使用してXMLを簡単に読み取り、JavaScriptでそのDOMを変更できます。

不正な形式のオブジェクトからJSの適切な構造に再構築する必要がある場合は、次のコードになります。

var cards = {}; // an object indexed by the CardCodes;
for (var i=0; i<data.length; i++) { // loop through the received JSON
    // data[i] equals the "element" variable from your code
    var code = data[i].CardCode;
    if (! code in cards) { // there is no card with that code
        cards[code] = {
            vendorSum: data[i].payment_sum,
            name: data[i].CardName,
            addr: data[i].Address,
            ...
            pmtDetail: [] // create array for the details
        };
    } // else: element already created
    cards[code].pmtDetail.push({
        docNum: data[i].DocNum, 
        amount: data[i].InvPayAmnt
        ...
    }); // adds a new detail object to the array
}
于 2012-06-04T17:36:54.873 に答える