web-dev-qa-db-fra.com

Jquery Map Array Clés et valeurs

J'ai examiné cette question dans d'autres questions StackOverFlow et je n'arrive pas à trouver la réponse.

J'ai un formulaire.

<input name="item[1]" class="item" value="1">
<input name="item[2]" class="item" value="50">
<input name="item[3]" class="item" value="12">

J'essaie d'obtenir les résultats de chaque entrée d'élément et de les envoyer via Ajax à mon contrôleur, c'est très bien lorsque j'utilise la méthode form action = "" mais via ajax, il me semble impossible de formater les données au format tableau.

Quelqu'un peut-il me dire ce que j'ai mal fait?

$('button#despatchOrder').on('click', function() {

    var values = $("input.items");

    var myArray = $.map(values, function(value, index) {
       return [value];
    });

    console.log(myArray);

});

Malheureusement, Jquery n'est pas ma langue la plus forte mais j'apprends. Je m'attendais à ce que la sortie soit quelque chose comme.

items = [
 1 => 1,
 2 => 50,
 3 => 12
]

Mais j'ai tout associé à l'entrée comme 

Input 1 = [
accept
accessKey
alt 
etc
etc
]
javascriptjqueryarraysajax
4
Dev.Wol

Quelqu'un peut-il me dire ce que j'ai mal fait?

Très peu! :-)

  • Dans votre callback $.map, le premier argument sera le élément , pas sa valeur, vous utilisez donc juste sa propriété value.
  • Vous l'enveloppiez également dans un tableau (return [value]), ce que vous ne voulez pas faire; $.map construira un tableau à partir des valeurs que vous renvoyez de chaque appel au rappel.
  • En outre, vous utilisiez input.items où vous vouliez input.item.

  • Vous n'avez pas besoin de déclarer l'argument index si vous ne l'utilisez pas.

    $ ('button # despatchOrder'). sur ('cliquez', fonction () {

    var values = $("input.item");                          // ***

var myArray = $.map(values, function(element) {        // ***
   return element.value;                               // ***
});

console.log(myArray);

    });

Exemple:

$('button#despatchOrder').on('click', function() {
    var values = $("input.item");
    var myArray = $.map(values, function(element) {
       return element.value;
    });
    console.log(myArray);
});
<input name="item[1]" class="item" value="1">
<input name="item[2]" class="item" value="50">
<input name="item[3]" class="item" value="12">
<button id="despatchOrder">Despatch</button><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Cela vous donne les éléments dans le tableau sans en utilisant le item[1] et ce nom. Qu'est-ce que vous avez montré que vous voulez

items = [
 1 => 1,
 2 => 50,
 3 => 12
]

n'est pas valide JavaScript. Ce qui précède vous donne:

myArray = ["1", "50", "12"];

mais si vous voulez des paires nom/valeur, un tableau d'objets serait probablement préférable:

myArray = [
 {name: "1", value: "1"},
 {name: "2", value: "50"},
 {name: "3", value: "12"}
]

Pour faire ça:

    var myArray = $.map(values, function(element) {
       return {name: element.name.substring(5, 6), value: element.value};
    });

Ou bien sûr, si vous voulez le nom complet item[1], supprimez simplement la partie substring.

Exemple:

$('button#despatchOrder').on('click', function() {
    var values = $("input.item");
    var myArray = $.map(values, function(element) {
       return {name: element.name.substring(5, 6), value: element.value};
    });
    console.log(myArray);
});
<input name="item[1]" class="item" value="1">
<input name="item[2]" class="item" value="50">
<input name="item[3]" class="item" value="12">
<button id="despatchOrder">Despatch</button><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Juste pour être complet, vous pouvez également utiliser la fonction autre map (jQuery en a deux), mais cela ne vous fait aucun bien:

var myArray = values.map(function() {
    return this.value;
}).get();

Notez la .get() à la fin.

6
T.J. Crowder

javascript n'a pas de tableau associatif, mais vous pouvez toujours accéder aux éléments par clé numérique 

$('button#despatchOrder').on('click', function() {

    var values = $("input.items");

    var myArray = $.map(values, function(value, index) {
       return $(value).val();
    });

    console.log(myArray);
    console.log(myArray[0]);

});

si vous voulez quelque chose de similaire aux tableaux associatifs, vous devriez utiliser un objet js

{key:"value"}

0
madalinivascu