How might I populate an object property using a JSON-encoded server response?

Question

How can i turn this:

<? echo json_encode($myArrays); ?>

...into this:

_rowData: [
    { name: "Most Recent", view: "recentView" }, 
    { name: "Most Popular", view: "popularView" }, 
    { name: "Staff Picks", view: "staffView" }
],

My script returns that ^, but i dont know how to put the data into the string, _rowData ? P.S. I am using Dashcode, trying to dynamically load items into a List Controller

So far, i have this:

var recentListControllerXHR = $.ajax("http://tarnfeldweb.com/applewebapps/ajax/recentApps.php", function(data){
                            return(JSON.stringify(data));
                          }, 'text');

rowData: recentListControllerXHR,

Answer 1

Ok - your problem appears to be a misunderstanding of how asynchronous APIs work. $.ajax() makes a request, and at some point in the future calls the provided callback with the response.

Assuming you have a name for the object you're populating, you can fill in the desired property using something like this:

var someObject = {
  ...
  rowData: null,
  ...
};

// at this point, someObject is incomplete...

$.getJSON("http://tarnfeldweb.com/applewebapps/ajax/recentApps.php", 
  function(data)
  {
    // called whenever the server gets around to sending back the data
    someObject.rowData = data;
    // at this point, someObject is complete.
  });

Note that I'm using jQuery's built-in support for JSON here. You can use the json.org library instead if you wish, but getJSON() is rather convenient if you don't have any unusual needs when parsing the data.

Answer 2

Try this:

var rowData;
$.getJSON("http://tarnfeldweb.com/applewebapps/ajax/recentApps.php", function(data) {
    rowData = data;
});

But note that rowData is not available until the callback function (see second parameter of getJSON call) has been called.

Answer 3

The question's essentially already been answered using another method, but, if you're interested in using the $.ajax method as opposed to the $.getJSON method, this is how you would do that:

var rowData;
$.ajax({
    url: "http://tarnfeldweb.com/applewebapps/ajax/recentApps.php",
    type: 'get',
    dataType: 'json' // could also be 'jsonp' if the call is going to another site...
    success: function(data){
        rowData = data; 
    }
});

Just another option, that's all...

Answer 4

Your function will return the data on a successful response. You have declared the callback function:

function(data){
                        return(JSON.stringify(data));
                      }

So, 'data' will contain any data that was returned from the request, if you're declaring your content type as text/json (or application/json - I don't remember off the top of my head) and rendering your JSON as text in the response you should be good.

What you probably want to do is have your function declare the variable as rowData and go from there, so do something like:

function(rowData){
           // do something with the rowdata
                          }

I doubt you need the stringify method unless you're trying to write the data out as text.

Answer 5

Looks like you don't understand how $.ajax works (looks like nobody do).

$.ajax is an asynchronous function, which means it does not return anything. It only prepares a function to be invoked later, when the data has been received.

Your code should look more like that:

var obj = {
 ...
 _rowData: [],
 ...
};

$.getJSON("http://tarnfeldweb.com/applewebapps/ajax/recentApps.php", function(data)
{
    // Now data contains your row data, 

    // you can either fill the global object
    obj._rowData = data;
    doSomethingWith(obj);

    // or use data directly
    doSomethingWith({
        ...
        _rowData: data
        ...
    });  
});

// Note that code below will be executed before the AJAX data is received