Défi Javascript. Comment puis-je y parvenir avec des tableaux?

Question

Disons que j'ai:

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

Je suis en train de trouver une nappe, moyen rapide de transformer ce tableau en ceci:

 

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

Notez que le motif. Le nom du tableau "directions" est le préfixe des valeurs. Je suis intéressé comment les gens peuvent faire ceci ou au moins suggérer un moyen pour moi d'essayer.

Des conseils seraient appréciés.

Merci!

EDIT **

Merci pour les suggestions à ce jour. Cependant, j'ai oublié de mentionner que le tableau "directions" doit être dynamique.

Par exemple, je pourrais utiliser:

 
places = ["name", "location"] 

devrait retourner

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

 
alpha = ["blue", "orange"] 

devrait retourner

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

Donc, fondamentalement, je pouvais passer un tableau en fonction et il renvoie cet objet de données.

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

Espérons que cela a du sens.

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

Je tiens à remercier tout le monde pour leur aide. J'ai fini par suivre une route différente. Après y avoir réfléchi, j'ai décidé de mettre des méta-informations dans le formulaire HTML lui-même. Et, je m'en tiens à une convention de nommage. Alors qu'un formulaire HTML a l'information dont il a besoin (SANS être gonflé) pour dire à jQuery où poster les informations. Voilà ce que je fini par faire (pour les personnes intéressées):

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

On ne sait vraiment pas ce que vous voulez ici. Peut-être que vous devriez donner l'interface à la fonction que vous voulez, et un exemple de code qui établit des exemples de variables et appelle la fonction.Ce que vous semblez demander est de rechercher dynamiquement les variables que vous avez déjà déclarées dans l'environnement, telles que directions_name et directions_start_address, et d'appeler la méthode val() sur chacune d'entre elles, puis de construire une chaîne de mappage de dictionnaire à ces résultats. Mais les clés du dictionnaire contiennent une syntaxe JavaScript. Es-tu sûr que c'est ce que tu veux?

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

Modifier: Pour utiliser JQuery pour rechercher des objets par ID au lieu de l'approche ci-dessus (qui recherche des variables globales par nom):

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

Cela va chercher le nom dans la espace global de la fenêtre (qui fonctionnera dans un navigateur de toute façon). Vous appelez cette fonction avec "directions" comme argument. Par exemple:

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

Est-ce ce que vous voulez?

(Note: Je vois quelqu'un d'autre a posté une solution en utilisant $ et "#" ... Je pense que sa syntaxe JQuery, à droite Cela fonctionne sans JQuery?.)

Modifier: Notez que cela vous permet d'utiliser un valeur dynamique pour "directions". Mais je ne sais toujours pas pourquoi vous voulez que ces touches soient "directions[name]", "directions[start_address]", au lieu de "name", "start_address", etc. Beaucoup plus facile à chercher.

Modifier: J'ai corrigé mon code d'exemple pour utiliser des fonctions dans les valeurs. Est-ce vraiment ce que tu veux? Ce serait plus simple si vous n'appeliez pas val() avec parens.

Answer 2

Comme ceci:

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

Ou,

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

EDIT: Vous pouvez passer un tableau et un préfixe.