• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Populate Table Rows With Data from AJAX

 
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Look into

insertRow, insertCell, createElement, appendChild

woth a for loop or setTimeout for looping through the object

Eric
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have got this code so far but the innerHTML lines generate errors:



This is my servlet code:

 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 ]
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
"${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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
and what happens when you do



Eric
[ January 21, 2008: Message edited by: Eric Pascarello ]
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
function toString(){[native code]}
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
What is the body of your response?
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sorry but what do you mean, body of response?
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I ran:

alert(wResults.myArray.toString());
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have no idea. You should be testing outside your IDE in any case.
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

{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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 ]
 
Sheriff
Posts: 13411
Firefox Browser VI Editor Redhat
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?
 
Ranch Hand
Posts: 269
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Never mind about the split. I just realized that each array element is an array itself.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks again for all the help. I am sure I will have another issue before long.
 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
reply
    Bookmark Topic Watch Topic
  • New Topic