1
votes

Remplir un tableau à chaque fois qu'un clic est effectué sur un élément avec JS

J'ai plusieurs éléments comme celui-ci:

var arr = {};
arr[$(this).data('value') + '_' + $(this).data('color')] = { 
    "category": $(this).data('category'),
    "value": $(this).data('value'),
    "color": $(this).data('color')
};

Chaque fois que l'utilisateur clique sur un élément, je devrais stocker les informations data- * dans un tableau. p>

Il est possible qu'un utilisateur puisse cliquer plusieurs fois sur les mêmes éléments mais avec une couleur différente (ex: Apple). Dans ce cas, je devrais mettre à jour le tableau avec les dernières valeurs d'élément cliquées et supprimer l'ancienne.

La sortie souhaitée est par exemple quelque chose comme ceci:

Array (
    [0] => Array (
        [category] => fruit
        [value] => apple
        [color] => green
    )
    [1] => Array (
        [category] => vegetable
        [value] => tomato
        [color] => red
    )
)

Veuillez noter que dans cet exemple, l'utilisateur clique sur le premier et après sur le second

 . C'est pourquoi, je ne devrais avoir que la deuxième   info et non les infos de la première  .  Faites-moi savoir si c'est clair. 
  En fait, voici le code que j'ai: 
 <div data-category="fruit" data-value="apple" data-color="yellow">Apple</div>
<div data-category="fruit" data-value="apple" data-color="green">Apple</div>
<div data-category="fruit" data-value="cherry" data-color="red">Cherry</div>
<div data-category="vegetable" data-value="tomato" data-color="red">Tomato</div>
<div data-category="vegetable" data-value="carrot" data-color="orange">Carrot</div>
  Le problème avec ce code est que je ne peux pas vraiment l'utiliser après comme je l'ai fait un tableau invalide. 
  Merci beaucoup pour toute aide.

javascript jquery arrays

3 commentaires

Veuillez ajouter votre code javascript

@TamilSelvanC, j'ai ajouté du code.

Votre structure principale est un objet, pas un tableau ... Utilisez simplement les valeurs comme propriétés de l'objet pour une mise à jour facile.

3 Réponses :

0
votes

Essayez ceci .Filtre avec data-value et data-category basé sur .IF vous avez besoin de plus d'ajout de condition avec dans le filtre

Remarque: Le tableau Js ne ressemble pas au tableau associatif php, son objet appelé en js . Le tableau n'a pas de paire clé / valeur .SO à utiliser avec un objet au lieu d'un tableau

1.Avant Object push, filtrez le tableau avec la même valeur n'existe pas

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-category="fruit" data-value="apple" data-color="yellow">Apple</div>
<div data-category="fruit" data-value="apple" data-color="green">Apple</div>
<div data-category="fruit" data-value="cherry" data-color="red">Cherry</div>
<div data-category="vegetable" data-value="tomato" data-color="red">Tomato</div>
<div data-category="vegetable" data-value="carrot" data-color="orange">Carrot</div>

var arr=[];
$(document).on('click','div[data-category]',function(){
   arr =arr.filter(a=> a.value != $(this).data('value') && a.category != $(this).data('category'))
   arr.push({
     category:$(this).data('category'),
     value   :$(this).data('value'),
     color   :$(this).data('color')
   });
   
   console.log(arr)
})

4 commentaires

Bonjour Prasanth, si je clique sur le deuxième élément, il garde les infos du premier élément.

Vérifiez la console.Chaque fois, cliquez sur l'objet de même valeur précédent est supprimé du tableau.

Puis-je transmettre cet objet à une page PHP comme un json?

ya sure.in php l'objet aimera votre résultat (tableau associatif)

0
votes

Récupérez les données de l'élément sur lequel vous avez cliqué en utilisant dataset , puis utilisez findIndex () pour vérifier si l'élément avec la même valeur est présent.

<div data-category="fruit" data-value="apple" data-color="yellow">Apple</div>
<div data-category="fruit" data-value="apple" data-color="green">Apple</div>
<div data-category="fruit" data-value="cherry" data-color="red">Cherry</div>
<div data-category="vegetable" data-value="tomato" data-color="red">Tomato</div>
<div data-category="vegetable" data-value="carrot" data-color="orange">Carrot</div>

let arr = [];
let divs = document.querySelectorAll('div');
divs.forEach(div => {
  div.addEventListener('click',(e) => {
    let data = e.target.dataset;
    let ind = arr.findIndex(x => data.value === x.value);
    if(ind === -1) arr.push(data);
    else arr[ind] = data;
    console.log(arr)
  })
  
})

0 commentaires

0
votes

<div data-category="fruit" data-value="apple" data-color="yellow">Apple</div>
<div data-category="fruit" data-value="apple" data-color="green">Apple</div>
<div data-category="fruit" data-value="cherry" data-color="red">Cherry</div>
<div data-category="vegetable" data-value="tomato" data-color="red">Tomato</div>
<div data-category="vegetable" data-value="carrot" data-color="orange">Carrot</div>

var result = [];
Array.from(document.querySelectorAll("div")).forEach(link => link.addEventListener('click', function(event) {
  let category_name = this.getAttribute('data-category');
  let category_value = this.getAttribute('data-value');
  let category_color = this.getAttribute('data-color');

  var found = result.some(function(el) {
    return el.category_name === category_name && el.category_value === category_value;
  });
  if (!found) {
    result.push({
      category_name: category_name,
      category_value: category_value,
      category_color: category_color
    });
  } else {
    index = result.findIndex(x => x.category_name == category_name && x.category_value == category_value);
    result[index]['category_color'] = category_color;

  }

  console.log(result);
}))

0 commentaires