JavaScript 挑战。我如何使用数组实现这一点？

Question

假设我有:

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

我正在尝试找到一种巧妙、快速的方法来将该数组转换为:

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()}

注意模式。数组“directions”的名称是值的前缀。我很感兴趣人们如何做到这一点，或者至少建议一种方法让我尝试。

如有任何提示，我们将不胜感激。

谢谢!

编辑 **

感谢到目前为止的建议。但是，我忘了提到数组“directions”需要是动态的。

例如，我可以使用:

places = ["name", "location"]

应该返回

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

alpha = ["blue", "orange"]

应该返回

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

所以基本上我可以将一个数组传递给一个函数，然后它返回该数据对象。

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

希望这是有道理的。

** 编辑 ************* *

我要感谢大家的帮助。我最终走了一条不同的路。考虑之后，我决定在 HTML 表单本身中放置一些元信息。而且，我坚持命名约定。这样 HTML 表单就有了它需要的信息(没有膨胀)告诉 jQuery 在哪里发布信息。这就是我最终做的(对于那些感兴趣的人):

    // 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

这里真的不清楚你想要什么。也许您应该提供所需函数的接口(interface)，以及设置一些示例变量和调用函数的一些代码示例。

您似乎要求的是动态查找您已经在环境中声明的变量，例如 directions_name 和 directions_start_address，并调用 val()他们每个人的方法，然后构造一个字典映射字符串到这些结果。但是字典的键包含 JavaScript 语法。你确定那是你想要的吗？

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;
}

编辑:要使用 JQuery 按 ID 查找对象而不是上述方法(按名称查找全局变量):

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;
}

这将在窗口的全局空间中查找名称(无论如何都可以在浏览器中使用)。您以“directions”作为参数调用该函数。例如:

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");

这是你想要的吗？

(注意:我看到其他人发布了一个使用 $ 和 "#" 的解决方案......我认为这是 JQuery 语法，对吧？这在没有 JQuery 的情况下有效。)

编辑:请注意，这允许您使用“方向”的动态值。但我仍然不确定为什么您希望这些键是 "directions[name]"、"directions[start_address]"，而不是 "name"、"start_address" 等。更容易查找。

编辑:我修复了示例代码以在值中使用函数。这真的是你想要的吗？如果您不使用括号调用 val() 会更容易。