Undefined on jQuery Ajax Request

[Mark Reyes]

Hi,

I am still a learning ajax and jquery but I encounter an error which I dont know how to resolve.

I am currently applying jquery on my webapps but it is displaying undefined when I issue an ajax request

$(document).ready(function(){
	$('#getData').click(function(){
			$.getJSON('getUsers.htm', function(data){
				//$('#ajaxContent').empty();
				$.each(data, function(entryIndex, entry){
					var html = "<div>";
					html += entry['strFirstName'] + " - " + entry['strLastName'];
					html +="</div>";
					$('#ajaxContent').append(html);
				});
			});
	});
});

As per my firebug, I see this the value of "entry" as below:

"[{"strFirstName":"Charles","strLastName":"Reyes","strMI":"","strPassword":"1","strUserID":""},
{"strFirstName":"Greg","strLastName":"Burton","strMI":"","strPassword":"Junior","strUserID":""}]

I think I am successful in generating the json response on my spring mvc controller.

but when I call the method entry['strFirstName'], it says undefined.

Is there something wrong?

[Eric Pascarello]

And what is entry? Did you do a console.log(entry) and see what it is?

Eric

[Mark Reyes]

Hi Eric,

And what is entry?

I was referring to this.

$.each(data, function(entryIndex, entry){

For each iteration of the each function, I see the json string...

 # "[{"strFirstName":"Charles","strLastName":"Reyes","strMI":"","strPassword":"1","strUserID":""},  
# {"strFirstName":"Greg","strLastName":"Burton","strMI":"","strPassword":"Junior","strUserID":""}]  

But I am not sure why when I call

entry['strFirstName']

, I get undefined value.
I check also the json response on my firebug and I see an HTTP status of 200 on the XHR tab and I see the response correctly seen on the json tab

Thanks..

[Bear Bibeault]

You're getting a string? Not a JavaScript construct? If that's the case, then of course you can't reference into it until its been converted to a construct.

If jQuery is not doing it for you, chances are that the JSON coming back from the response is malformed.

[Mark Reyes]

Hi Bear,

I am currently experimenting a json library called json-lib in my spring mvc web apps.

As I check on the firebug console, I saw below images and .

I am currently unsure if the response is really malformed given the images I see on firebug.

I tried another way of parsing my json response but it still results to undefined..

 $(document).ready(function(){
	$('#getData').click(function(){
			$.getJSON('getUsers.htm', function(data){
				console.log(data);
				//$('#ajaxContent').empty();
				$.each(data, function(entryIndex, entry){
					console.log(entry);
					var user = eval(entry);
					var html = "<div>";
					html += user.strFirstName + " - " + user.strLastName;
					html +="</div>";
					$('#ajaxContent').append(html);
				});
			});
	});
});   

Thanks.

[Eric Pascarello]

problem here is you are not returning a JSON object, you are returning an array.

Your output should look like

{ items : [{}, {}, {}] }

that you each loop would be

$.each(data.items, ... );

Eric

[Mark Reyes]

Hi,

I finally got my first json attempt using below code as per your advise.
Thanks to you...

$(document).ready(function(){
	$('#getData').click(function(){
			$.getJSON('getUsers.htm', function(data){
				$.each(data, function(entryIndex, entry){
					var user = eval(entry);
					$.each(user, function(id, value){
						var html = "<div>";
						html += value.strFirstName + " - " + value.strLastName;
						html +="</div>";
						$('#ajaxContent').append(html);
					});				
				});
			});
	});
});

But doing this, I have several questions that I want to confirm. Hope you'll still be patient on me.

1. Why is it that I get undefined value when I replace this code

html += value.strFirstName + " - " + value.strLastName; 

with this

html += $(this).strFirstName + " - " + $(this).strLastName;

The this keyword refers to the current object as I checked with the firebug console.

2. Libraries such as GSON/JSON Lib return a stringify representation of my java objects and does not really return a javascript construct? It is upto you to use the eval() function to convert this to a javascript construct. Is my understanding correct?

3. In the jquery api,

jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ),

I notice the [] (square bracket), does it signifies that this returns an array.

Sorry for the many questions, I just jump out into jquery and been trying so many things at once to learn about this library.

I can now edit my spring mvc app to add ajax support.

Thanks a lot.

[Bear Bibeault]

mark reyes wrote:1. Why is it that I get undefined value when I replace this code

html += value.strFirstName + " - " + value.strLastName; 

with this

html += $(this).strFirstName + " - " + $(this).strLastName;

The this keyword refers to the current object as I checked with the firebug console.

It does not. The this keyword always refers to the function context (there's no such things as a "current" object). And $(this) is a jQuery wrapped set that contains the referenced instance. There's no such field as strFirstName defined by jQuery som I'm clueless as to what you are actually trying to do.

2. Libraries such as GSON/JSON Lib return a stringify representation of my java objects and does not really return a javascript construct? It is upto you to use the eval() function to convert this to a javascript construct. Is my understanding correct?

It returns JSON, an interchange format. Something needs to interpret it to turn it into a JavaScript construct. $.getJSON will do it for you if its valid.

3. In the jquery api,

jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] ),

I notice the [] (square bracket), does it signifies that this returns an array.

No. That indicates optionality.

If only someone had written a book on jQuery that would make all of this clear....

[Mark Reyes]

Hi Bear,

I missed reading this post.

You're getting a string? Not a JavaScript construct? If that's the case, then of course you can't reference into it until its been converted to a construct.
If jQuery is not doing it for you, chances are that the JSON coming back from the response is malformed.

I think I am making a mistake in creating the response. Kindly have a look at how I do it and point out if something is wrong please..
In my Spring MVC, I am doing below procedure

public class SystemTimeController extends AbstractController {
	private JSONBuilder builder;

	protected ModelAndView handleRequestInternal(HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("rows", builder.getJSON());

		return new ModelAndView("jsonView", map);
	}
}

public class JSONBuilder {

	public String getJSON() {
		User user = new User();
		user.setStrFirstName("Mark");
		user.setStrLastName("Reyes");
		user.setStrPassword("1");

		Gson gson = new Gson();
		return gson.toJson(user);
	}

}

I think the response object does get pass at the client side but the call to $.getJSON fails and cannot convert it to a construct.
Do you think this is the case here?



This is what happen when I call below in my jquery code

$(document).ready(function(){
	$('#getData').click(function(){
		$.getJSON('getUsers.htm', function(data){
			var html = "<div>";
			html += data.rows.strFirstName + " - " + data.rows.strLastName;
			html +="</div>";
			$('#ajaxContent').append(html);
		});
	});
});

It returns undefined: But as I have checked the XHR tab on my firebug console, I did see the JSON response


Sorry for the length post.. I am just totally confused on how to do it. Most of the ajax code that I see uses PHP but I dont know PHP. I am beginning to think that my response is really malformed.

[Bear Bibeault]

Sorry I will not look at screen shots rather than posted code.

But the only thing that is of interest is the body of the response. Have you used a tool such as Firebug to inspect it and make sure that it's what you expect? And something that getJson() will handle?

[Eric Pascarello]

rows is a string, not a object. Look at the response closely and you will see why.

Eric

[Mark Reyes]

Hi Bear and Eric,

I reconfigured my spring json builder and have added "()" before I sent out the response

public class JSONBuilder {
	public String getJSON() {
		User user = new User();
		user.setStrFirstName("Mark");
		user.setStrLastName("Reyes");
		user.setStrPassword("1");

		Gson gson = new Gson();
		return "(" + gson.toJson(user) + ")";
	}
}

I change back my code again and used eval on the string response using below code:

$(document).ready(function(){
	$('#getData').click(function(){
		$.getJSON('getUsers.htm', function(data){
			console.log(data.rows);
			var obj = eval(data.rows);
			
			var html = "<div>";
			html += data.rows.strFirstName + " - " + data.rows.strLastName;
			html +="</div>";
			$('#ajaxContent').append(html);
		});
	});
});

I checked on firebug console and see the value of the response body as:

({"strUserID":"","strPassword":"1","strFirstName":"Mark","strLastName":"Reyes","strMI":""})

The HTML markup was successfully added.

I have some assumption that I would like to confirm though:

1. I needed the eval function because the call to $.getJSON does not results to a valid JSON Format.
This brings me back to my original question GSON would return a 'stringify' representation of my java object and its up to you to build a valid javascript construct at the client side.

May I know what I need to do at the server side so that I wont need the eval function at the client side? I see a lot of PHP-serverside codes, and I cannot see the eval function being used at the jquery side

2. I am returning one JSON object and not an array, I needed the parenthesis because of what is stated in this URL
It states:

Note The extra parentheses are used make eval unconditionally treat the source input like an expression. This is especially important for objects. If you try to call eval with a string containing JSON text that defines an object, such as the string "{}" (meaning an empty object), then it simply returns undefined as the parsed result. The parentheses force the JavaScript parser to see the top-level curly braces as the literal notation for an Object instance rather than, say, curly braces defining a statement block. Incidentally, the same problem does not occur if the top-level item is an array, as in eval("[1,2,3]"). For sake of uniformity, however, JSON text should always be surrounded with parentheses prior to calling eval so that there is no ambiguity about how to interpret the source.

Sorry for taking so much of your time but I think I am learning things..

[Bear Bibeault]

What's with the extra parens? That may be what's fouling up getJson(). If you're going to do the eval() yourself (not recommended), don't use getJson()!

[Mark Reyes]

Hi Bear,

If I dont use an eval on this code and just do it like this

$(document).ready(function(){
	$('#getData').click(function(){
		$.getJSON('getUsers.htm', function(data){
			console.log(data.rows);
	
			var html = "<div>";
			html += data.rows.strFirstName + " - " + data.rows.strLastName;
			html +="</div>";
			$('#ajaxContent').append(html);
		});
	});
});

It is evaluated as undefined - undefined. The HTML Mark up would not result in my name being appended into it but rather the word undefined.

[Bear Bibeault]

If you want to fix this, then this needs to cut to the chase. What is being returned as the response that is not being correctly evaluated?

[Mark Reyes]

Hi Bear,

When I execute this code

console.log(data.rows); 

It prints, {"strUserID":"","strPassword":"1","strFirstName":"Mark","strLastName":"Reyes","strMI":""}

But when I try to execute with this statement, I was thinking that $.getJSON already made the conversion into a JSON construct already

html += data.rows.strFirstName + " - " + data.rows.strLastName;

It prints undefined.

As what Eric mentioned above, data.rows is a string so I need to add an eval() method prior to calling the object property (e.g. data.rows.strFirstName)

But as what you are saying, If you're going to do the eval() yourself (not recommended), don't use getJson()!

This gets me confused actually.

I checked on the xhr tab on my firebug and I see this one printed on the response.
There's a bunch of "\" in the response.

{"rows":"{\"strUserID\":\"\",\"strPassword\":\"1\",\"strFirstName\":\"Mark\",\"strLastName\":\"Reyes\",\"strMI\":\"\"}"}

I am not sure if this is what you are looking though.

[Bear Bibeault]

The JSON that is being returned defines rows as a string. It will not evaluate to a structure. You need to fix the JSON, not hack the page.

[Mark Reyes]

Hi Bear,

The JSON that is being returned defines rows as a string. It will not evaluate to a structure. You need to fix the JSON, not hack the page

Sorry, I dont have an idea on how to fix the JSON. Can you give me a hint where to do the change?

Is it in my Spring controller?

Pardon me for dragging your time into this so much...

Thanks...

[Bear Bibeault]

Wherever the JSON is being generated on the server.

The fact that: "{\"strUserID\":\"\",\"strPassword\":\"1\",\"strFirstName\":\"Mark\",\"strLastName\":\"Reyes\",\"strMI\":\"\"}" is in the outer quotes, makes it a string.

[Mark Reyes]

Hi Eric and Bear,

For some reason that I dont know, when I write the json response using the GSON API in my Spring MVC controller, the call to $.getJSON cannot convert the response to a valid javascript construct

I revert back to using the JSON-LIB JSON Library and it was able to construct the correct javascript construct without using the eval option.

Kudos to both of you. I did learn a lot doing this simple exercise.

Thanks.