web-dev-qa-db-fra.com

La boucle JavaScript sur l'entrée crée un tableau d'objets

J'essaie de boucler sur les éléments d'entrée dans div, pour créer un tableau d'objets

<div id="time">
  <input type="text" name="from" placeholder="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" />
</div>

J'essaie de créer le tableau d'objets suivant.

 unavailability: [
      { from: '12:00', to: '12:30' },
      { from: '13:00', to: '13:30' }
    ]

Voici ce que j'ai essayé jusqu'à présent, mais le résultat est assez différent.

var dataArray = []
$("#time").find('input').each(function() {
  var data = {};

  data[this.name] = this.value
  dataArray.Push(data);

});
console.log(dataArray)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time">
  <input type="text" name="from" placeholder="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" />
</div>

JSFiddle

javascriptjqueryarrays
16
Deano

Je l'aurais résolu avec FormData. Cela signifie moins de navigation dans les DOM et moins de chance de faire quelque chose de mal si vous modifiez le balisage ultérieurement. Cela signifie également que vous devrez changer votre élément div en un élément de formulaire (à moins que vous ne le placiez quelque part plus haut - dans ce cas, vous pouvez utiliser cet élément de formulaire dans le constructeur et conserver l'élément div):

// Get a formdata instance
var fd = new FormData(time)

// Get all values
var from = fd.getAll('from')
var to = fd.getAll('to')

// Transform
var unavailable = from.map((from, i) => ({ from, to: to[i] }))

console.log({unavailable})
<form id="time">
  <input type="text" name="from" placeholder="12:00 AM" value="12:00" />
  <input type="text" name="to" placeholder="12:30 AM"  value="12:30" />
  <input type="text" name="from" placeholder="13:00 AM" value="13:00" />
  <input type="text" name="to" placeholder="13:30 AM" value="13:30" />
</form>

BTW, vous mélangez 12/24 heures (13:00). Cela devrait peut-être être écrit à 13h00 (?).

J'aurais aussi changé le type en type="time" pour éviter les erreurs. Cela vous donne un sélecteur d’heure Nice et normalise la valeur si l’utilisateur entre une valeur de 12 ou 24 heures . Vous pourrez alors utiliser step/min/max/requis pour une meilleure validation si vous en aviez besoin.

8
Endless

Vous pouvez parcourir tous les éléments ayant pour valeur d'attribut name from. Pour obtenir la valeur to, utilisez la méthode next() de jQuery.

Utilisez la méthode .val() pour obtenir la valeur de item .

$('#submit').click(function() {
  var data = [];

  $('#time input[name="from"]').each(function() {
    data.Push({
      from: $(this).val(),
      to: $(this).next().val()
    });
  });

  console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter times in the below textboxes
<div id="time">
  <input type="text" name="from" placeholder="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" />
</div>

<button id="submit">Submit</button>

12
Tushar

Au lieu de parcourir chaque entrée, vous devez effectuer une itération sur chaque autre élément d'entrée avec l'attribut name égal à form. Créez ensuite les informations JSON pour l'élément sur lequel vous effectuez une itération et pour l'élément d'entrée immédiatement suivant.

De plus, 12h30 n'est pas la valeur de l'élément, son espace réservé. Vous devez remplacer la valeur par un espace réservé:

$("#time").find('input[name="from"]').each(function() {
    var data = {};
    data[this.name] = this.placeholder;
    var nextInput = $(this).next()[0];
    data[nextInput .name] = nextInput.placeholder;
    dataArray.Push(data);
});

Démo de travail

Le meilleur moyen d’y parvenir consiste à utiliser la fonction jQuery .map() qui renvoie l’objet JSON avec .get() pour créer un tableau d’objets JSON:

var dataArray = $("#time").find('input[name="from"]').map(function() {
    var nextInput = $(this).next()[0];
    var jo = {};
    jo[this.name]=this.placeholder;jo[nextInput.name] = nextInput.placeholder
    return jo;
}).get();


var dataArray = $("#time").find('input[name="from"]').map(function() {
    var nextInput = $(this).next()[0];
    var jo = {};
    jo[this.name]=this.placeholder;jo[nextInput.name] = nextInput.placeholder
    return jo;
}).get();

console.log(dataArray)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time">
  <input type="text" name="from" placeholder="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" />
</div>

4
Milind Anantwar

Vous pouvez le faire de la manière suivante:

var unavailability = [];
$('#time input[name=from]').each(function(i, input){
  unavailability.Push({
    from: $(this).attr('placeholder').split(' ')[0],
    to: $(this).next().attr('placeholder').split(' ')[0]
  });
});

console.log(unavailability);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time"> 
  <input type="text" name="from" placeholder="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" />
</div>

3
Mamun
var dataArray = [];
$("#time").find('input[name="from"]').each(function() {
    var data = {};
    data.from = this.value;
    data.to = $(this).next().val();
    dataArray.Push(data);
});

console.log(dataArray);

Violon mis à jour

1
Lalit

Ici, vous devez soit utiliser un gestionnaire d'événements pour modifier les valeurs de toute variable input, soit attribuer des valeurs initiales à ces entrées.

Vous pouvez également effectuer une itération comme indiqué ci-dessous pour obtenir le résultat souhaité.

var dataArray = [];
var data = {};
$("#time").find('input').each(function(i) {
    if(i%2 === 0){
      data={};
      data[this.name] = this.value;
    } else{
      data[this.name] = this.value;
    	dataArray.Push(data);
    }
});

console.log(dataArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time"> 
  <input type="text" name="from" placeholder="12:00 AM" value="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" value="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" value="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" value="13:30 AM" />
</div>

<span id="output"></span>

1
Rohit Agrawal

Dans ma réponse, je ne pousse un nouvel élément dans un tableau que si this.name === "from". Si this.name === "to", j'ajoute une nouvelle propriété au dernier élément envoyé, et finalement nous avons 2 objets dans un tableau et 2 propriétés dans chaque objet:

$("#btn").click(doStuff);

function doStuff() {
  var dataArray = []
  var newArrayLength;
  $("#time").find('input').each(function() {
    if (this.name === "from") {
      var data = {};
      data[this.name] = this.value 
      newArrayLength = dataArray.Push(data);
    } else if (this.name === "to") {
      dataArray[newArrayLength - 1][this.name] = this.value; 
    }
  });
  console.log(dataArray);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time"> 
  <input type="text" name="from" placeholder="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" />
</div>

<span id="output"></span>

<button id="btn">Click</button>

https://jsfiddle.net/ss725ere/2/

0
Commercial Suicide