循环通过json并显示多行

时间:2012-06-15 13:37:48

标签: jquery json

我使用JSON DATA做了很少的工作,现在已经好几天了。

我的应用程序的一部分[使用jquery datatables]显示服务合同上可用资金数量的信息。当我向下钻取时,我希望看到对合同的所有修改。 我正在使用ajax调用来获取此数据。我成功地显示了返回的单行信息但没有多行。

这是我到目前为止所拥有的

我的JSON数据 - 我没有看到像这样的数据集在任何地方使用过。

{"SUCCESS":true,
 "ERRORS":[],
 "DATA":{
    "COLUMNS":["REQNUM_ID",
               "PORDER_ID",
               "REQNUM",
               "AWARD_DTE",
               "AWARD_AMNT",
               "DTE_ENTERED",
               "ENTERED_BY",
               "DTE_MOD",
               "MOD_BY",
               "VALID_FLAG",
               "MOD_NUM",
               "DESCRIPTION",
               "PROCRGN"],
    "DATA":[
           [2,35,"144-12DG-261","October, 25 2011 00:00:00",2155.02,"March, 28 2012 00:00:00",48317,null,null,"Y",1,null,"DG"],
           [3,35,"144-12DG-264","November, 14 2011 00:00:00",0,"March, 28 2012 00:00:00",48317,null,null,"Y",2,null,"DG"],
           [4,35,"144-12DG-268","December, 09 2011 00:00:00",1000.00,"March, 28 2012 00:00:00",48317,null,null,"Y",3,null,"DG"]
           ]
 }
}

我的代码:下面的代码实际上给了我两行而不是3,但是,它的第一组数据重复了两次。

// the table containing the index data
var oTable_2 = "";
// the select row
var nTargetRow = "";
// 
//var poid = #CntModVal.porder_id#; //should from + column
//
var aData = ""; // holds the text for selected row (column position is critical)
/* -----------------------------------------------------------------------
Jquery Ajax action scrpts
----------------------------------------------------------------------- */
// Method retrieves the selected row index id and executes the ajax call
function getModDetails() 
{   
//alert('getModDetails');

// retrieve the data from the selected row
aData = oTable_2.fnGetData( nTargetRow );
//alert('adata[1]  ' + aData[1]);
  // build the url for the ajax call to use
var cfcUrl = '#application.ajax_url#';
    cfcUrl +='RemoteModDetails.cfc?';
    cfcUrl += 'method=getPos';
    cfcUrl +='&porderid=' + aData[1] ; // contract id


// make the ajax call
$.ajax(
     {
        type: "GET",
        url: cfcUrl,
        cache: false,
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: function (objResponse )
            {   //alert('retrieve the data step 3');
               if(objResponse.SUCCESS)
                {  // alert('success');
                    openModDetailRow(objResponse.DATA);

                }
                else
                {
                    ShowErrors(objResponse.ERRORS);
                }
            },
        error : function(jqXHR, textStatus, errorThrown ) {
                ajaxErrorHandler( jqXHR, textStatus, errorThrown );
            }
    });
}

// Function ajaxErrorHandler
//    DESCRITPION:  Error Handler fir the error message for failed ajax call'
//    PARAMETERS:
//      jqXHR       = The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object,
//      textStatus  = a string describing the type of error that occurred 
//                    and an optional exception object, if one occurred. 
//                    Possible values for the second argument (besides null) are 
//                    "timeout", "error", "abort", and "parsererror". 
//      errorThrown = the textual portion of the HTTP status, such as "Not Found" 
//                    or "Internal Server Error."
function ajaxErrorHandler( jqXHR, textStatus, errorThrown) 
{
alert('Unable to retieve the requested information due to a server error');
}
// Handle the failed response error
function ShowErrors( statusMsg)
{
alert('Unable to retieve the requested information. Status: ' + statusMsg);
} 
// create the indormation row based on the data retruned by the ajax call
function openModDetailRow(indexInfo)
{
var sOut = '<table align="left" width="95%" cellpadding="2" cellspacing="0" border="1" class="hiddenTbl ui-widget-content">';   
$.each(indexInfo, function(index,data){
/* Assumes only one row returns; additional rows ignored */
var aReqNumID         = indexInfo.DATA [0][0]; //requisition number id  Award amount
var aPorderID         = indexInfo.DATA [0][1]; // purchase order id 
var aRequistionNum    = indexInfo.DATA [0][2]; //  Requisition number description
var aAwardDte         = indexInfo.DATA [0][3]; // award date date entered
var  aAwardAmount     = indexInfo.DATA [0][4]; //  date modifified
var aDteEntered       = indexInfo.DATA [0][5]; //  entered by
var aEnteredBy        = indexInfo.DATA [0][6]; //   modified by 
var aDteMod           = indexInfo.DATA [0][7]; //   mod number
var aModBy            = indexInfo.DATA [0][8]; //   
var aValidFlag        = indexInfo.DATA [0][9]; //  
var aModNum           = indexInfo.DATA [0][10]; //  
var aDescription      = indexInfo.DATA [0][11]; //  valid flag

//alert('pop details step 4 '  + aPorderID +  ' poid');

// create the additonal information table

// row 1
    sOut += '<tr><td><strong>Mod Number:</strong><br> <strong     style="color:##FF0;">&nbsp;' + aModNum + '</strong></td>';
    sOut += '<td><strong>Requsition Numbeer:</strong><br> ' + aRequistionNum + '</td><td><strong> Award Amount:</strong><br> <strong style="color:##FF0;">$' + aAwardAmount.toFixed(2) + '</strong></td></tr>';
    // row 2
    sOut += '<tr><td ><strong>Award Date:</strong><br>' + aAwardDte + ' </td><td ><strong>Description:</strong><br> ' + aDescription + '</td><td> </td></tr>';
});
// end of table
sOut += '</table>';


// display the row
//alert(sOut);

    //alert(index,data);
    oTable_2.fnOpen( nTargetRow, sOut, 'details' );




}
/* -----------------------------------------------------------------------
 * Jquery Display scrpt
 * ----------------------------------------------------------------------- */
$(document).ready(function()
{//alert('insert details step 1');
/*
 * Insert a 'details' column to the table
 */
var nCloneTh = document.createElement( 'th' );   // for header
var nCloneThF = document.createElement( 'th' );  // for footer
var nCloneTd = document.createElement( 'td' );   // for body
nCloneTd.innerHTML = '<img src="./images/details_open.png">';
nCloneTd.className = "center";
// add blank header
$('##MVW thead tr').each( function () {
    this.insertBefore( nCloneTh, this.childNodes[0] );
} );
// add blank footer header
$('##MVW tfoot tr').each( function () {
    this.insertBefore( nCloneThF, this.childNodes[0] );
} );
// add icon open/close info rowrow
$('##MVW tbody tr').each( function () {
    this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
// run the jquery data table script
    oTable_2 = $('##MVW');
    oTable_2.dataTable({
        "aoColumnDefs": 
            [ { "bSortable": false, "aTargets": [ 0 ] } ],
        "aaSorting": [[1, 'asc']],
        "iDisplayLength": 5,
        "aLengthMenu": [[5,10, 25, 50, 100, -1], [5,10, 25, 50, 100, "All"]],
        "bJQueryUI": true
        });/* end data table */

/* Add event listener for opening and closing details
 * Note that the indicator for showing which row is open is not controlled by DataTables,
 * rather it is done here
 */
$('##MVW tbody td img').live('click', function () {
    nTargetRow = this.parentNode.parentNode;
    if ( this.src.match('details_close') )
    {   //alert('close row');
        /* This row is already open - close it */
        this.src = "./images/details_open.png";
        oTable_2.fnClose( nTargetRow );
    }
    else
    {
        //alert('open row step 2');
        this.src = "./images/details_close.png";
        getModDetails();
    }
} );

}); 
/* end ready */

所以我错过了什么,无法弄清楚它是什么。   如果我把.each()放在表标签之外,它就会破坏代码而我什么都没得到。

如果我把它包裹在这个:: oTable_2.fnOpen(nTargetRow,sOut,'details');

我得到一行

建议???

谢谢你的时间。

1 个答案:

答案 0 :(得分:0)

您遇到各种错误,但最大的错误是您错误地使用了每个语句。你正在迭代你的每个语句,所以你得到三个循环,但在你内部你永远不会使用索引或语句中的数据。

尝试以下任一解决方案:

在您的每个语句中,您将在参数中获取索引,但从不使用它们。

for(var index = 0; index < indexInfo.DATA.DATA.length ; index++) {
    var aReqNumID         = indexInfo.DATA.DATA [index][0]; //requisition number id  Award amount
    var aPorderID         = indexInfo.DATA.DATA [index][1]; // purchase order id 
    var aRequistionNum    = indexInfo.DATA.DATA [index][2]; //  Requisition number description
    ...

$.each(indexInfo.DATA.DATA, function(){
    var aReqNumID         = this[0]; //requisition number id  Award amount
    var aPorderID         = this[1]; // purchase order id 
    var aRequistionNum    = this[2]; //  Requisition number description
    ...

在第二个语句中, this 对象是数组中的当前对象。

编辑更新了循环项目