Javascript / JSON help!

Teh Russ

Can any of you clever people help me with something?

I've got an assignment to create some code to import and display JSON data in Javascript - this bit I can do, and I've written a function to do it.

The bit I'm struggling with is that they want the function split into methods, which I'm not that well up on.

My current code looks like this:

function loadJSON(fname) 
{
	var request= new XMLHttpRequest;
	request.open("GET", fname,true);
	request.onreadystatechange=function() 
	{
		if (request.readyState == 4) 
		{
			if (request.status != 404) 
			{
				//document.getElementById("ServerData").innerHTML = request.responseText+"<br>";
				var data=eval("(" + request.responseText + ")");
				htmlString = "<table>";
				for(i = 0; i<4; i++)
				{
					htmlString += "<tr><td>" + data.table.rows[i].columns[0] + "</td><td>" + data.table.rows[i].columns[1] + "</td><td>" + data.table.rows[i].columns[2] + "</td></tr>";
				}
				htmlString +="</table>";
				document.getElementById("ServerData").innerHTML=htmlString;
			} 
			else 
			{
				document.getElementById("ServerData").innerHTML = fname + " not found";
			}
		}
	}
	request.send(null);
}

Now, this works... but they want it so they can call separate parts of it using these methods, like this:

var JSONRequest = new loadJSON("jsondata.json");
	JSONRequest.get();
	var Response = JSONRequest.response; // should contain the JSON code
	var jsonObject = Convert(Response); // this should be a function that formats the JSON into HTML

I've kinda done it, but my method doesn't seem to be returning an object that I can use in another function. This is how far I've got:

function loadJSON(filename) {
	this.filename = filename;	
	
	this.get = function(response){
		var JSONrequest= new XMLHttpRequest;
		JSONrequest.open("GET",this.filename,true);
			if (JSONrequest.readyState == 4) {
						if (JSONrequest.status != 404) {						
							this.response=JSONrequest.responseText;
						} else {
							this.response="error 1";
						}
				} else {
					this.response="error 2";
				}
		}	
}

... this seems to throw my "error 2" response every time I try it. Where am I going wrong? Am I even doing this right?

Any help you could give me would be invaluable.

mewso

Shouldn't you be setting up the onreadystatechange event and then calling the request.send as you did in the first case. There may be issues with scope here too but I'm not certain.

Are you allowed use any libraries?

Teh Russ

musician wrote: »

Shouldn't you be setting up the onreadystatechange event and then calling the request.send as you did in the first case. There may be issues with scope here too but I'm not certain.

Are you allowed use any libraries?

How would I go about doing that? (sorry, still quite new to doing things in this very OO way).

Not really allowed to use libraries, alas. I'd be using Prototype or one of the other AJAX libraries if I could.

mewso

function loadJSON(filename) {
    this.filename = filename;    
 
    this.get = function(response){
        var JSONrequest= new XMLHttpRequest;
        JSONrequest.open("GET",this.filename,true);
        [B]JSONrequest.onreadystatechange=function()   {[/B]
            if (JSONrequest.readyState == 4) {
                        if (JSONrequest.status != 404) {                        
                            this.response=JSONrequest.responseText;
                        } else {
                            this.response="error 1";
                        }
                } else {
                    this.response="error 2";
                }
            };
        [B]JSONrequest.send(null);[/B]
        }    
}

I mean those two lines which you had in your original function but not in the one that won't work.