J'utilise généralement JQuery comme une béquille pour obtenir des trucs et passer au problème suivant. Cependant, avec l'introduction de stimulus aux rails 6, je voudrais mieux écrire Vanilla JS. J'ai des difficultés à réécrire le ci-dessous Mes tentatives d'automne en train de travailler. $. Carte et $. Chaque Ligne:
3 Réponses :
Dans votre cas, vous pouvez convertir Remarque: le problème de votre propre code est causé par l'ordre des paramètres - Exemple (non testé) - Vanille sous Commentaire JQuery P> $. mappe () code> à array.map () code> et convertissez le compteur et le $. Chaque () code> à un array.reduce () code > appel. souvent $. Chaque () code> est converti en array.foreach () code>, mais dans ce cas, vous souhaitez prendre un tableau et la convertir en nombre et cette transformation est généralement fait en réduisant. $. Chaque (index, élément) code> vs. vs.foreach (article , index) code>. p> handleSuccess(data) {
// const items = $.map(data, notification => { return notification.template })
const items = data.map(notification => notification.template)
// $.each(data, (i, notification) => { if (notification.unread) { unreadCount += 1 }});
const unreadCount = data.reduce((count, notification, i) => notification.unread ? count + 1 : count, 0)
this.unreadCountTarget.innerHTML = unreadCount
this.itemsTarget.innerHTML = items
}
Merci @oridrori - .map () retourne un tableau, qui a ajouté une virgule inattendue entre chaque objet. Extension de votre réponse T pour renvoyer une chaîne contenant les éléments de tableau concaténés ensemble J'ai ajouté .join ('') à la fin de data.map (notification => notification.template)
JavaScript possède sa propre fonction de carte natale (ce n'est pas depuis longtemps, donc le shim jQuery), et c'est très similaire à celui de JQuery. En fait, les deux array.pototype.map () et Array.Prototype.foreach () sont très similaires, avec des interfaces similaires, commencent simplement votre invocation avec le nom de la matrice. Donc, au lieu de jQuery https: //developer.mozilla .Org / fr-US / Docs / Web / JavaScript / Référence / Global_Objects / Array / Carte
https://developer.mozilla.org/ EN-US / DOCS / Web / JavaScript / Référence / Global_Objects / Array / Treeach $. Carte (données, notification => {renvoyer notification.template}) , c'est data.map (notification => notification.template) ou similaire. Et la seule différence entre carte natif () et pourcheach () est que pour Acheach () applique la fonction à chaque élément de la matrice, tandis que la carte () va une étape plus loin et renvoie une nouvelle gamme de valeurs résultantes si elle est invoquée.
Essayez ceci:
handleSuccess(data){
const items = data.map(notification => notification.template)
let unreadCount = items.reduce(( total, curr) => curr.unread ? total +=1 : total)
this.unreadCountTarget.innerHTML = unreadCount
this.itemsTarget.innerHTML = items
}
"Mes propres tentatives n'échouent pas réellement." De quelle manière ne fonctionnent-ils pas? Y a-t-il une erreur (si oui, quel est le message d'erreur)? Avez-vous la mauvaise sortie (si oui, quelles sont les sorties attendues et réelles)?