Question

Let’s say I have:

var directions = [ "name", "start_address", "end_address", "order_date" ];

I’m trying to find a slick, fast way to turn that array into this:

data: {
  "directions[name]"          : directions_name.val(),
  "directions[start_address]" : directions_start_address.val(),
  "directions[end_address]"   : directions_end_address.val(),
  "directions[order_date]"    : directions_order_date.val()
}

Notice the pattern. The name of the array “directions” is the prefix to the values.
I’m interested how people can either do this or at least suggest a way for me to try.

Any tips would be appreciated.

Thanks!

EDIT **

Thanks for the suggestions so far. However, I forgot to mention that the array “directions” needs to be dynamic.

For example, I could use:

places = ["name", "location"]

should return

data: {
  "places[name]"     :  places_name.val(),
  "places[location]" :  places_location.val()
}

alpha = ["blue", "orange"]

should return

data: {
  "alpha[blue]"   : alpha_blue.val(),
  "alpha[orange]" : alpha_orange.val()
}

So basically I could just pass an array into a function and it return that data object.

 var directions = ["name", "start_address", .... ];
 var data = someCoolFunction( directions );

Hope that makes sense.

** EDIT **************

I want to thank everyone for their help. I ended up going a different route. After thinking about it, I decided to put some meta information in the HTML form itself. And, I stick to a naming convention. So that an HTML form has the information it needs (WITHOUT being bloated) to tell jQuery where to POST the information. This is what I ended up doing (for those interested):

    // addBox
    // generic new object box.
    function addBox(name, options) {
        var self = this;
        var title = "Add " + name.charAt(0).toUpperCase() + name.slice(1);
        var url = name.match(/s$/) ? name.toLowerCase() : name.toLowerCase() + "s";
        allFields.val(""); tips.text("");

        $("#dialog-form-" + name).dialog( $.extend(default_dialog_options, {
            title: title,
            buttons: [
                {   // Add Button
                    text: title,
                    click: function(){
                        var bValid = true;
                        allFields.removeClass( "ui-state-error" );

                        var data = {};
                        $("#dialog-form-" + name + " input[type=text]").each(function() {   // each is fine for small loops :-)
                            var stripped_name = this["name"].replace(name + "_", "");
                            data[name + "[" + stripped_name + "]"] = $("#dialog-form-" + name + " #" + name + "_" + stripped_name).val();
                        });

                        // verify required fields are set
                        $("#dialog-form-" + name + " input[type=text].required").each(function() {
                            bValid = bValid && checkLength( $(this), $(this).attr("name").replace("_", " "), 3, 64 );
                        });

                        // find sliders
                        $("#dialog-form-" + name + " .slider").each( function() {
                            data[name + "[" + $(this).attr("data-name") + "]"] = $(this).slider( "option", "value" );
                        });

                        data["trip_id"] = trip_id;
                        if(options != null) {   $.extend(data, options); } // add optional key/values
                        if(bValid) {
                            $(".ui-button").attr("disabled", true);
                            $.ajax( { url : "/" + url, type : "POST", data : data } );
                        }
                    }
                },
                { text: "Cancel", click: function(){$( this ).dialog( "close" );} }
            ]
        }));
    }

Answer 1

It’s really unclear what you want here. Perhaps you should give the interface to the function you want, and an example of some code which sets up some sample variables and calls the function.

What you seem to be asking for is to dynamically find variables which you have already declared in the environment, such as directions_name and directions_start_address, and call the val() method on each of them, then construct a dictionary mapping strings to those results. But the keys of the dictionary contain JavaScript syntax. Are you sure that’s what you want?

function transform(name)
{
    var data = {};
    var names = window[name];
    for (var i=0; i<names.length; i++)
    {
        data[name + "[" + names[i] + "]"] = window[name + "_" + names[i]].val();
    }
    return data;
}

Edit: To use JQuery to look up objects by ID instead of the above approach (which looks up global variables by name):

function transform(name)
{
    var data = {};
    var names = $("#" + name);
    for (var i=0; i<names.length; i++)
    {
        data[name + "[" + names[i] + "]"] = $("#" + name + "_" + names[i]).val();
    }
    return data;
}

This will look up the name in the global space of the window (which will work in a browser anyway). You call that function with “directions” as the argument. For example:

var directions = [ "name", "start_address", "end_address", "order_date" ];
var directions_name = {"val": function() {return "Joe";}};
var directions_start_address = {"val": function() {return "14 X Street";}};
var directions_end_address = {"val": function() {return "12 Y Street";}};
var directions_order_date = {"val": function() {return "1/2/3";}};
data = transform("directions");

Is that what you want?

(Note: I see someone else posted a solution using $ and "#" … I think that’s JQuery syntax, right? This works without JQuery.)

Edit: Note that this lets you use a dynamic value for “directions”. But I’m still not sure why you want those keys to be "directions[name]", "directions[start_address]", instead of "name", "start_address", etc. Much easier to look up.

Edit: I fixed my sample code to use functions in the values. Is this really what you want? It would be easier if you weren’t calling val() with parens.