• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 583
  • Last Modified:

JSON Data Output in a tabular grid (invoked a jsp modal upon ajax success from a js file)

I have been trying to seek help on this kind of question.

Here's mine. Need somebody who can help me paint the data upon ajax success on a modal window.


$.ajax({
                  type: 'post',
                  url: something.do,
                  data: $('#someForm').serialize(),
                  success: function(jsonResponse) {
                        if(jsonResponse.errorMap != null) {
                              alert(jsonResponse.errorMap);
                        } else if (jsonResponse.transactionPage != null) {
                              showData(jsonResponse.transactionPage); // instead of this I want it to loop and iterate and paint data as given below...
                        }
                  }
            });  





This showData method gets me unformatted data. I want to format it in a tabular grid in a modal window (JSP).

This is the data that is getting returned

{
  "transactions":
  [
    {
      "error": "",
      "ctrNum1": "123456789",
      "successful": true
    },
   
    {
      "error": "",
      "ctrNum2": "123456791",
      "successful": true
    },
    {
      "error": "",
      "ctrNum3": "123456792",
      "successful": true
    },
    {
      "error": "",
      "ctrNum4": "123456793",
      "successful": true
    }
  ]
}


Also I need iterate or loop in dynamically.



I want to paint the data in a tabular format upon success.

success: function(jsonResponse) {
               if(jsonResponse.errorMap != null){
                alert(jsonResponse.errorMap);
               }else if(jsonResponse.transactionSummary != null){
                  var trans = jsonResponse.transactionSummary;
                  var date =  json.transactionDate;
                      var html = "";
                        alert(jsonResponse.transactionSummary);
                        alert(jsonResponse.transactionSummary.ctrNum);
                        for (var i=0; i < trans.length; i++) {
                              html += "<div><div>" +  (i + 1) + "</div><div>" + trans.ctrNum + "</div>";
                             
                              if (trans.successful == true) {
                                    html += "<div>Successful</div></div>"
                              } else {
                                    html += "<div>" + trans.error + "</div></div>"
                              }
                        }
                 
                  //showData(jsonResponse.transactionSummary);
                  }
              }


0
mahaq
Asked:
mahaq
1 Solution
 
ProculopsisCommented:

Try something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26851670.html</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function() {

var jsonResponse = {};
jsonResponse.transactionPage = {
  "transactions": 
  [
    {
      "error": "",
      "ctrNum1": "123456789",
      "successful": true
    },
    
    {
      "error": "",
      "ctrNum2": "123456791",
      "successful": true
    },
    {
      "error": "",
      "ctrNum3": "123456792",
      "successful": true
    },
    {
      "error": "",
      "ctrNum4": "123456793",
      "successful": true
    }
  ]
};

showData(jsonResponse.transactionPage);

function showData( transactionPage ) {
  var row = $("<tr/>");
  for ( var column in transactionPage.transactions[0] ) {
    row.append( $("<th/>").html( column ) );
  }
  $("#status").append( row );

  for ( var index in transactionPage.transactions ) {
    var row = $("<tr/>");
    for ( var column in transactionPage.transactions[index] ) {  /////alert(transactionPage.transactions[index][column])
      var cell = transactionPage.transactions[index][column];
      cell = ( cell.toString() != "" )? cell : " ";
      row.append( $("<td/>").text( cell ) );
    }
    $("#status").append( row );
  }
}


  $("#dialog")
  .dialog({
    autoOpen: false,
    width: "auto",
    height: "auto",
    modal: true,
    draggable: false,
    resizable: false
  });

  $("#paypal").click( function() {
    $("#dialog").dialog( "open" );
  });

});

</script>
</head>
<body>

<input id="paypal" type="button" value="Click me!!!" />

<div id="dialog" title="JSON Data">
  <table id="status" border="1"></table>
</div>

</body>
</html>

Open in new window

0
 
mahaqAuthor Commented:
It was a great solution, simplified too, thanks a lot.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now