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”的名称是值的前缀。我很感兴趣的是人们如何做到这一点，或者至少为我提供尝试的方法。

任何提示都将不胜感激。

谢谢！

编辑**

感谢您提出的建议。但是，我忘了提到阵列“方向”需要是动态的。

例如，我可以使用：

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

目前还不清楚你想要什么。也许你应该给你想要的函数接口，以及一些设置一些样本变量并调用函数的代码示例。

您似乎要求的是动态查找已在环境中声明的变量，例如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"等。更容易查找。

编辑：我修复了示例代码以使用值中的函数。这真的是你想要的吗？如果你没有用parens调用val()，那会更容易。

Answer 2

像这样：

var data = { };
for(var i = 0; i < directions.length; i++) {
    var name = directions[i];
    data["directions[" + name + "]"] = $('#directions_' + name).val();
}

或者，

    data["directions[" + name + "]"] = directionsElements[name].val();

编辑：您可以传递数组和前缀。

Javascript挑战。如何使用数组实现此目的？

2 个答案: