wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes Populate Table Rows With Data from AJAX Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Populate Table Rows With Data from AJAX" Watch "Populate Table Rows With Data from AJAX" New topic
Author

Populate Table Rows With Data from AJAX

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Is it possible and if so how can I make a JSON call to get a List of records(Array of Arrays). Then populate the rows of a table with this data?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Look into

insertRow, insertCell, createElement, appendChild

woth a for loop or setTimeout for looping through the object

Eric
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
I have got this code so far but the innerHTML lines generate errors:



This is my servlet code:

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60740
    
  65

What is inList and why are you showing us JSP source in this forum?

Much better to show us the rendered final HTML.

Is this what is being returned from your Ajax call? I though you said you were returning JSON?
[ January 21, 2008: Message edited by: Bear Bibeault ]

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
"${inList}"

That is a string...not an object or an array

The only reason it does not fail at the for loop is that

"${inList}".length is 9 since there are 9 characters in that string.

Eric
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
I am using getJSON to make the request. At the servlet I call my connection bean. It returns an array which I thought I was supposed to save to a session attribute List of Lists. Then the servlet returs a pass or fail back to javascript. The javascript tries to populate the table with session attribute that was set. From the responses I am getting I take it that this is incorrect. How do I send my array back to calling javascript with JSON?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60740
    
  65

Originally posted by Steve Dyke:
I am using getJSON to make the request.
Do you mean jQuery's $.getJSON() function?

At the servlet I call my connection bean. It returns an array which I thought I was supposed to save to a session attribute List of Lists. Then the servlet returs a pass or fail back to javascript.
That makes no sense. The response of the servlet -- or JSP, if the servlet is forwarding to a JSP -- should be the formatted JSON of your data.

The javascript tries to populate the table with session attribute that was set.
JavaScript knows nothing about session scoped variables. That's a server-side concept.

How do I send my array back to calling javascript with JSON?
As JSON. What I would do is to have your servlet put the data in a request scoped attribute (session is overkill) and forward to a JSP that formats the JSON response. The callback for $.getJSON() will receive the evaluated JavaScript object that results from the JSON.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Ok here is my revised servlet code(Please forgive the use of arg0 once again):



This is called from javascript on my JSP with:



The last alert line error and states that myArray0.0 is null or not an object.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
and what happens when you do



Eric
[ January 21, 2008: Message edited by: Eric Pascarello ]
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
function toString(){[native code]}
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60740
    
  65

What is the body of your response?
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Sorry but what do you mean, body of response?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Originally posted by Steve Dyke:
function toString(){[native code]}


Did you run my orginal code that was there for like 30 seconds or the code that is now there.

Eric
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
I ran:

alert(wResults.myArray.toString());
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60740
    
  65

Originally posted by Steve Dyke:
Sorry but what do you mean, body of response?

What is being returned by the Ajax request as its response.

If you aren't using FireBug within Firefox to help debug this, you need to. Right now.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
I seems to me that the return is what is wrong:



myArray does not seem to be sending as an array.
[ January 21, 2008: Message edited by: Steve Dyke ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60740
    
  65

Originally posted by Steve Dyke:
I seems to me that the return is what is wrong

That's why we need to see your response. If it's not valid JSON, all bets are off.

/waits
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Originally posted by Bear Bibeault:

What is being returned by the Ajax request as its response.

If you aren't using FireBug within Firefox to help debug this, you need to. Right now.


You have mentioned this before. Can this be used within Websphere Development Studio Client? Can you give me some direction?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60740
    
  65

I have no idea. You should be testing outside your IDE in any case.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Here is what in in mt output console if it helps:

These values come from the doGet method of the servlet

[1/21/08 18:02:44:897 CST] 00000045 SystemOut O 852849
[1/21/08 18:02:44:913 CST] 00000045 SystemOut O A340-600
[1/21/08 18:02:44:913 CST] 00000045 SystemOut O B/C,F/C
[1/21/08 18:02:44:913 CST] 00000045 SystemOut O
[1/21/08 18:02:44:913 CST] 00000045 SystemOut O ABI
[1/21/08 18:02:44:913 CST] 00000045 SystemOut O {errorString:'NoError', myArray:'[[Ljava.lang.String;@4cfd8b40'}
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60740
    
  65

{errorString:'NoError', myArray:'[[Ljava.lang.String;@4cfd8b40'}


'nuff said.

Your servlet needs to generate valid JSON. A toString() on the array doesn't cut it. You need to construct a valid JSON array from the Java array.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Ok, factfConn.installArray is the array that my bean returns. The values you saw in the console output are the values of:

factfConn.installArray[0][0]
factfConn.installArray[0][1]
etc. so I know it is working.

So how do I get this array into a JSON array?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60740
    
  65

The format of a JSON string array is:


Sounds like it's time to learn how to use StringBuilder.
[ January 21, 2008: Message edited by: Bear Bibeault ]
Ben Souther
Sheriff

Joined: Dec 11, 2004
Posts: 13410

Go to www.json.org.
They have sample code for parsing and building JSON strings in just about every language you can think of.

Personally, I use Frank Carver's libraries.
http://www.stringtree.org


Java API J2EE API Servlet Spec JSP Spec How to ask a question... Simple Servlet Examples jsonf
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Ok, I have the StringTree-JSON.jar included into my project. I have tested the writer and it is parsing the Java array.

I still have a few issues.
In my return string I not only have one array but three arrays and a string value. Example: {errorString: myConn.ErrorValue, myArray1: myConn.Array1, etc.

When the Javascript gets the array how do I handle it so I can populate the table?
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
Here is what I did...



There should be enough included here for you to figure out how the parsing is working. Its just a simple loop with the $.each function. I'm returning JSON the same way you are using stringTree. I am parsing a List of Beans for my JSON response and I too have some errant data that I don't know what it means. Its an extra name:value pair. I just ignore it since all the neccessary data is there. As long as you have what you need then just use what you need and forget the rest for now. Later on you can go back and figure it out to improve performance since sending less is more.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
This is my JavaScript but I get an error when I try the split. - Object does not support this property or method.

Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Never mind about the split. I just realized that each array element is an array itself.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60740
    
  65

The beauty of having the JSON evaluated is that you don;t need to do any parsing or splits or anything other than reference the JavaScript structure specified by the JSON. You should be creating your JSON to suit your script, not the other way around.
Steve Dyke
Ranch Hand

Joined: Nov 16, 2004
Posts: 1393
Thanks again for all the help. I am sure I will have another issue before long.
Arun Raj G R
Greenhorn

Joined: Jul 19, 2011
Posts: 1
Try this URL: http://www.arunraj.co.in/index.php?option=com_content&view=article&id=7:populate-table-using-ajax&catid=4:javascript&Itemid=9

You just have to provide the name of the web service which returns an xml data.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Populate Table Rows With Data from AJAX
 
Similar Threads
Updating temp tables
Refresh rows of a JTable
JTable Problem Since 1 week
JDBC connection with JTable
populate a form with rows and save it back to DB?