Solved

Formatting JSON output into a tabular grid

Posted on 2011-02-25
5
530 Views
Last Modified: 2012-05-11
$.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
Comment
Question by:mahaq
  • 2
5 Comments
 
LVL 26

Expert Comment

by:mrcoffee365
ID: 35001048
I don't quite see how Java would help.  This is a purely Javascript question.
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 35001971
i think you're almost there, just use the eval function so you can use the iterator:

for (var i=0; i < trans.length; i++) {
	  html += "<div><div>" +  (i + 1) + "</div><div>" + eval("trans.ctrNum"+(i+1)) + "</div>";

	  if (trans.successful == true) {
			html += "<div>Successful</div></div>"
	  } else {
			html += "<div>" + trans.error + "</div></div>"
	  }
}

Open in new window

0
 
LVL 26

Expert Comment

by:mrcoffee365
ID: 35039134
The way EE works is that experts take the time to help you out, and you work with them to get an answer that works for you.  If you don't respond when you have more questions, and then delete the question without assigning points to the expert after getting help, that isn't respectful of the people you have asked to help you.

tagit gave you an excellent answer.  Points should be awarded to him.
0
 

Author Comment

by:mahaq
ID: 35039234
Hi mrcoffee365,

Sorry for the confusion, but I gave 500 points to tagit.
I had no intention of over looking at it.

Once if any one of you feels I caused any disrespect, sorry about it.

 
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Python Assistance 7 36
backtracking recursion  code 19 40
github account with ecipse 1 20
Disk Ram Peak 1 17
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now