Using Jquery $getJSON How do I dynamically create data for the [data] parameter after Url param?

Question

I have no problems getting the Json to work and parse the json return. I was just wondering how I could build a dynamic "whatever data is" and stick it into [data] to pass my parameters from there and not manually append them to the url.

From jquery website example:

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
     alert("JSON Data: " + json.users[3].name);
});

I thought I could build a string ( which doesn't make sense anyway ) and drop it inside the { }, but I obviously don't understand that part.

name: isn't a string and you can't put a variable in that part, so how would I dynamically put items into whatever [data] is.

UPDATE: Thanks for the answers. Would I be able to remove a parameter name from the object if I didn't find a valid value later on or would I need to destroy it and recreate it? I am using some select boxes to choose things and I may not have something selected so I wouldn't want to pass that parameter name/value.

Answer 1

You can build your object like this:

var someVar = someRandomString();
$.getJSON('test.js', (function() {
  var theData = {};
  theData[someVar] = someRandomValue();
  return theData;
})(), function(jsonStuffFromServer) {
  alert("JSON Data: " + jsonStuffFromServer.users[3].name);
});

Of course you don't have to build up the "data" object right there in an anonymous function; you can do it separately beforehand:

var theData = {};
theData[someVariableWithANameInIt] = someRandomValue();
$.getJSON(url, theData, function(jsonStuff) { ... });

Here's how you could build up such an object from a set of <select> elements on your page:

var theData = {};
$('#myForm select').filter(function() { return $(this).val() != ''; })
  .each(function() {
    theData[this.name] = $(this).val();
  });

$.getJSON(url, theData, function(jsonStuff) { ... });

Answer 2

Create an object, then you can put any properties you like in it:

var data = new Object();

or:

var data = {};

You can use property syntax:

data.name = 'John';
data.time = '2pm';

or associate array syntax (which is useful if the parameter name is a keyword):

data['name'] = 'John';
data['time'] = '2pm';

You can of course use variables for the values, and even use variables to specify the parameter name:

var param = 'name';
var value = 'John';
data[param] = value;

Then you just use the data variable in the call:

$.getJSON("test.js", data, function(json){
   alert("JSON Data: " + json.users[3].name);
});

Answer 3

You can do this:

var myName = $("#nameField").val();
var myTime = $("#timeField").val();

$.getJSON("test.js", { 'name': myName, 'time': myTime}, function(json){
     alert("JSON Data: " + json.users[3].name);
});

Is that what you mean, or dynamic parameters as well as variables?

Answer 4

The {} is a javascript object literal so name is a property of that object.

You can do something like this:

var data = {};
data.name = $("#input").val();
$.getJSON("test.js", data, function(json){
     alert("JSON Data: " + json.users[3].name);
});

Or something like this

var data = {
    name: $("#input").val(),
};
$.getJSON("test.js", data, function(json){
     alert("JSON Data: " + json.users[3].name);
});