I can't seem to receive my JSON object correctly

Question

Sorry for the badly worded title, and I would also like to apologize in advance if my explanation is lackluster. My knowledge of JavaScript and Ajax stuff isn't really that great.

Anyway, so, what I am trying to do is display a list of items using PHP, and then when an item is clicked, a popup will be displayed basically asking if the users want to add the items to the DB (it's essentially importing from one DB to another). Part of the popup is a drop down list that contains possible parents for the imported items. (So, if you are importing a project called Vista, you might place it in the parent category 'OS').

In order to make the drop down, an ajax request must be made, and the back end PHP replies with a JSON object which contains all elements that need to be included in the drop down.

So, as a test to see if the AJAX connection works, I just arbitrarily place a button on the window like so:

<div align="center" onclick="test()">TEST BUTTON </div>  

and have a JS function called test:

function test(){
    var url = "index.php?module=getlist";
    //Code to send post request with a callback to function test2();
}

and a function test2():

function test2(data){
    if (data){
        alert(data.Project[0].id);
    }
    else {
        alert("ERROR");
    }
}

Note: The PHP code returns a JSON object and one of the sub-object thingies is called Project which is an associate array with fields like id and name.

The above works. The alert box shows a number that corresponds to a project id.

But, we want to have a popup that contains the list! So, we get some html like this:

<td align="center" onclick="collection('Random_Name', 'Random_Description')">Project 1</td>

Note: I am passing the values for the item Name and Description to a JS function called collection.

function collection(name, description){
    test();
    //Stuff that creates the popup, creates a form in the popup, and populates the form  with default values(name and description).
    // Following Stuff is used to make the drop down.
    var tempdata = new Array(new Array());
    tempdata[0]['name'] = json.Project[0].name;
    tempdata[0]['value'] = json.Project[0].id;
    //This function creates the Select list, it requires a name, default value, and
    //a multi-dimensional array like the one defined above.
    var pacolist = createSelect("collection_list",'',tempdata)  
    //Append the elements together and add a save button.
}

To try and get this to work, I declared a global variable called json at the top of the page. I changed the alert(data.Project[0].id); in test2() to json = data; But, it didn't work.

I get an Uncaught TypeError: Cannot read property 'Project' of undefined error when I click to open the popup.

I changed the test2() method to be like this instead:

function test2(data){
      if(data){
          return data
      }
      else{
          //Code from the original test() function to send post request to PHP with
          //a callback to test2.
      }

and in the collection() function, I added this: var json = test2,(No global json) but that did not work either.

Sorry for the long winded question, but basically, I open a function, the function needs to call another function that sends a post request and the data received by the request needs to be used by the original function. How do I do this?

I think this is just a time issue. As in the request takes a while, and in the mean time, the original function has already moved on.

EDIT: Found a solution. I think it was a timing issue. In order to fix it. I made the page html call a function that stored the name and description as global variables. This function then made the post request with a callback to a different function. This different function then used the data (the JSON object) it received and passed it along with the global name and description to the collection() function mentioned earlier.

Answer 1

You have to parse the data before you use it.

//For IE6/IE7
var data = eval('(' + json + ')');

//For IE8+/Chrome/Firefox...
var data = JSON.parse(json);