# Other Languages > jQuery >  JSON Problem

## 12many

Hi There 

Im trying to create a little dialog where a net user can select a previous destination for a trip request. 

Ive got a bit stuck working with the JSON
This is my entire class, I have used someone else's work to help me with get the visual box up. 

The problem i think that i have is on the build_PastDestinations() function, Its doesn't seem to get past the starting $(function() and moves straight to the end of the function 
it never seems get to here 'tablebody += "<tr><td>" + destination.Address + "</td></tr>";' before the the box appears. 

The Json Looks like this [{"Address":"address1"},{"Address":"address2"}]





```
var winaddpick;
var AddPick;
var ExAddress;
var PickerSpanId = "PickerBoarder";
var apLeft = 0;
var apTop = 0;
var apWidth = 600;
var xpos = 0;
var ypos = 0;
var apHeight = 0;
var apPosOffsetX = -200; //X position offset relative to calendar icon, can be negative value
var apPosOffsetY = 0; //Y position offset relative to calendar icon, can be negative value

//Add Picker Prototype
function build_PastDestinations(){
	var tablebody = "<tbody>\n";
	$(function(){
		$.getJSON("phpscripts/getpastdestinations.php",function(data){
			var destination="";
			$.each(data,function(index,destination){
				tablebody += "<tr><td>" + destination.Address + "</td></tr>\n";
			});
		});
	});
	tablebody += "</tbody>\n"
	return tablebody;
}

function show_addpicker()
{
	var myaddresss = new Array();
	myaddresss[0] = "address 1";
	myaddresss[1] = "address 2";
	myaddresss[2] = "address 3";
	var PickerData = "<Span style='cursor:auto;'>";
	var vPickerHeader = "<Table Style='width:500px;padding:0;margin:5px auto 5px auto;text-align:center;'>/n<thead><tr><th>Previous Destinations</th></tr></thead>\n";
	
	var PickerBody = build_PastDestinations(); //"<tbody>\n";
	// var length = myaddresss.length;
	// for (var i = 0; i < length; i++) 
	// {
		// PickerBody += "<tr><td>" + myaddresss[i] + "</td></tr>\n"; 
	// }
	var PickerCloser = "\n<tr>\n<td colspan='7' style=\"text-align:right;\">";
	PickerCloser += "<img onmousedown='javascript:close_win();' src='javascripts/dtp/images2/cal_close.gif'>";
	PickerCloser + "</td></tr>\n</tbody>\n</table>\n</span>";
	apHeight = 400;
	if (ypos > apHeight)
	{
		ypos = ypos - calHeight;
	}
	if (!winaddpick)
	{
		span = document.createElement("span");
		span.id = PickerSpanId;
		span.style.position = "absolute";
		span.style.left = (xpos + apPosOffsetX) + 'px';
		span.style.top = (ypos - apPosOffsetY) + 'px';
		span.style.width = apWidth + 'px';
		span.style.border = "solid 1pt #000000";
		span.style.padding = "0";
		span.style.backgroundColor = "#ffffff";
		span.style.zIndex = 100;
		document.body.appendChild(span);
		winaddpick = document.getElementById(PickerSpanId);
	}
	else
	{
		winaddpick.style.visibility = "visible";
		winaddpick.style.Height = apHeight;
		
	}
	winaddpick.innerHTML = PickerData + vPickerHeader + PickerBody + PickerCloser;
	return true;
}
function close_win()
{
	winaddpick.style.visibility = 'hidden';
}
function get_mPos(evt)
{
	var objectID,
	dom,
	de,
	b;
	
	if (document.addEventListener)
	{ // w3c
		objectID = evt.target.id;
		if (objectID.indexOf(PickerSpanId) !== -1)
		{
			dom = document.getElementById(objectID);
			cnLeft = evt.pageX;
			cnTop = evt.pageY;

			if (dom.offsetLeft)
			{
				cnLeft = (cnLeft - dom.offsetLeft);
				cnTop = (cnTop - dom.offsetTop);
			}
		}
		xpos = (evt.pageX);
		ypos = (evt.pageY);
	}
	else
	{
		de = document.documentElement;
		b = document.body;
		xpos = event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
		ypos = event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
	}
}

document.onmousedown = get_mPos;
```

Id be quite happy to convert the JSON to an array first if that help. I can tell by using firebug that it is calling the PHP file and getting a response but nothing seems to happen with it

Hope some one can help

IAN

----------


## szlamany

Did you set a breakpoint in the function?  FB will not step into that function, afaik...

Does FIREBUG show the POST under the CONSOLE tab - so you can see the response?

----------


## 12many

Hi szlamany

Thanks for the reply  :Smilie: 

In the FB Console its shows as a "GET http://address.php"

and the response is this this 
 [{"Address":"address1"},{"Address":"address2"}]

I have been trying it with this 

{"results":[{"Address":"address1"},{"Address":"address2"}]}

but that won't work either.

I think that with FB you have to have a breakpoint at the address of the function that you are calling,(Which in JQUERY i have found a bit of a pain)

Any way thanks again for any help

IAN

----------


## szlamany

You should set a break *at every single line* so that you can see how far into that EACH function it's getting.

Also - change this

var destination="";

to this:

var destination={};

[edit] Oddly it's an array of objects... [/edit]

----------


## 12many

Hi Hi szlamany

When i get to here in jQuery the call back is undefined. Does it matter that im using this function with no data??

getJSON: function( url, data, callback ) {
return jQuery.get( url, data, callback, "json" );
} 

Ian

----------


## szlamany

With the callback undefined does it actually "return" data right at that moment?  I do not use getJSON - and I do like to use callbacks myself...

What do you mean "with no data"?

----------


## 12many

when i have used this function before i have used it like this 
$.getJSON("phpscripts/getpastdestinations.php",{"var1":"something"},function(data){
}
but i have found a few example where there is no data, And my php script does not require any data

----------


## szlamany

Oh - sorry - then you must change this

$.getJSON("phpscripts/getpastdestinations.php",function(data){

to

$.getJSON("phpscripts/getpastdestinations.php",{},function(data){

You must respect the arguments - and pass an empty object for data.

The "function" is the callback - that's loaded up in a kind of closure-space that javascript has.

----------


## 12many

its really wierd.

it fails but once it had already display the box it seems to have another go and then it succeeds But obviously its too late then  :Frown: 

scratch that god knows whys thats happening,

----------


## 12many

Hi There 

function done( status, nativeStatusText, responses, headers ) When i get to here in jquery none of it has been defined only status where = "" 

not sure if this helps.

Ian

----------


## szlamany

It's an async call - kind of ugly to be breaking while it's delivering the response.

Have you used the getJson successfully elsewhere??

This link

http://api.jquery.com/jQuery.getJSON/

says you can call it with two parameters and leave off the "data" - it must check the type of parameter to figure out how to handle it.

If you look at that link - at the first code example using getJson - I would set a break point at this line

*var items = [];*

and see if *data* is filled.

That would be a break point for you at 

*var destination="";*

Can you do that and tell me if *data* is filled?

If it is not filled - and you see in the console tab that it's returning your data for real - then you are not debugging the correct firing of the call back.

Have you used call back functions a lot?

btw - if you are not changing data on the "server" you should use a POST - and not a GET - afaik.

----------


## 12many

sadly im fairlly new to it all, This is pretty much my first proper website, and ive had pretty much no training. im afraid that i haven't used call back functions a lot?

I set a break point at that line and it never got hit!!! 

How can i change to a POST?

Ian

----------

