Discussion :

[marionmc]

Hello à tous,

Je débute en javascript donc si vous pouviez être patients avec moi, je vous en serais reconnaissante


J'essaye de faire un formulaire de commentaires qui publie les commentaires au clic.
Chaque commentaire est un objet avec plusieurs valeurs renseignées dans le formulaire (nom, prénom et commentaire).

J'ai un array qui regroupe les commentaires publiés en temps qu'objets. Ma démarche est la suivante:

J'ai une fonction qui récupère ce qui a été renseigné dans le formulaire à la soumission -> Création de commentaire.

Une autre fonction ajoute le commentaire créé à l'array de commentaires déjà existants.

Comme je débute, je me sers de la fonction alert() pour être sûre que chaque étape fonctionne correctement. Pour le moment, ma fonction fonctionne pour aller récuperer les données entrées dans le formulaire et je vois leurs assignations à mon nouvel objet mais quand ça arrive à la fin de ma fonction, j'ai [object Object] qui s'affiche et je n'arrive pas à comprendre pourquoi...

Si vous pouviez me conseiller sur où je me gourre, ça me serait super utile!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const newComment= {
    nameIcon: '',
    commentDate:'',
    userName: '',
    commentInput: ''
}
var newCommentName = '';
var newCommentInput ='';
 
function createComment (){
    newCommentName = document.getElementById("Name").value;
    newComment.userName = newCommentName;
    newCommentInput = document.getElementById("Comment").value;
    newComment.commentInput = newCommentInput;
}
function addComment(){
    commentsTable.unshift(newComment);
}
var button = document.querySelector('#Btn')
button.onclick = function(event) {
	// prevent the webpage from reloading
    event.preventDefault();
    createComment();
    // addComment();
    alert(newComment);
    document.querySelector('.comments__published').innerText = commentsTable;
}

D'avance merci,
Marion

[Beginner.]

Salut,

Je vous conseil d'utiliser la console plutôt que alert...

[marionmc]

Merci pour ta réponse.... Effectivement, la console me montre bien que l'objet a bien récupérer mes données... par contre ça semble coincer à cette ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    document.querySelector('.comments__published').innerText = commentsTable;

Il me donne toujours [Object, object]

[Beginner.]

Oui car dans ce genre de situation on essai d'afficher un objet comme si c'était une string (je crois que dans ce cas la méthode toString est appelée implicitement/automatiquement)...

Voici une explication (source : https://developer.mozilla.org/fr/doc...ng#Description ) :

Chaque object possède une méthode toString() qui est appelée de façon automatique à chaque fois que l'objet doit être représenté sous forme de texte ou à chaque fois qu'on utilise un objet et que la valeur attendue est une chaîne de caractères. Par défaut, chaque objet qui descend d'Object hérite de la méthode toString(). Si cette méthode n'est pas surchargée, toString() renvoie "[object type]", où type est le type de l'objet.

Je ne peux pas tester votre code alors dites moi ce que vous voulez faire exactement.

PS : à part ça il y a quelques soucis" dans votre code...

[marionmc]

Ah merci, je vais aller étudier ça maintenant!

Pour les soucis, je veux bien que vous me les montriez si possible?

[Beginner.]

Ben par exemple la variable commentsTable n'est pas définie et pourquoi newComment est déclarée comme une constante alors que les valeurs de ses propriétés peuvent changer et c'est toujours le même objet qui est ajouté au tableau, à la fin vous allez vous retrouver avec plusieurs fois le même objet...

Bon c'est un peu compliqué mais vous comprendrez mieux quand vous serez heurtée au problème alors on pourra corriger...

Avec quel html vous testez votre code pour que je puisse tester moi aussi ?

[Beginner.]

Voici un code qui met en évidence le problème : https://jsbin.com/keyinibagu/edit?js,output


On voit bien que chaque fois qu'on clique sur le bouton on ajoute l'objet newComment au tableau et même si à chaque clique on entre un nom et un commentaire différent on se retrouve avec plusieurs fois le même objet ayant les valeurs entrées lors du dernier clique...

[marionmc]

Merci beaucoup pour ton extrait!

Effectivement, je commence à voir où ça cloche! Pour l'array, je l'ai bien déclaré en amont, j'ai oublié de le rajouter dans l'extrait de code par contre...

Par contre, je commence à me demander si ma logique d'utiliser un array d'objet est bonne. car au final, je veux publier la liste des commentaires avec chaque nouveau commentaire mais pas sous cette forme.... raaah je suis vraiment pas douée en js

[Beginner.]

Salut,

Ben oui c'est pour ça que je vous ai demandé ce que vous vouliez faire, cela me paraissait étrange d'afficher un tableau comme ça...

Le tableau pour stocker tous les objets n'est pas une mauvaise idée après il faut voir si vous avez besoin de stocker ou bien d'afficher au fur et à mesure...

Sinon on peut afficher les objets du tableau dans une table html...

[marionmc]

Merci pour votre répnse!

Je suis partie sur un tableau d'objets car c'est ce que nous venons d'apprendre. J'y ai réfléchi toute la nuit, et je me demande s'il me manque c'est pas deux boucles:

- 1 pour afficher tous les objets de mon tableau (tous les éléments enregristrés)

- 1 pour enregistrer les données du nouveau commentaire sous forme d'objet pour l'ajouter au tableau.

Par contre je sèche pour savoir comment exactement configurée ma boucle et à quel moment car le concept d'index est encore un peu flou pour moi

[melka one]

jour

essai en faisant un JSON.stringify()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelector('.comments__published').innerText = JSON.stringify(commentsTable)

concernat l'utilisation de boucle une seul suffit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
for (var i=0;i<commentsTable.length;i++){
var obj=commentsTable[i]
 
alert('premiere valeur:  ${commentsTable[i].nameIcon} deuxieme valeur:  ${commentsTable[i].commentDate} troisieme valeur:  ${commentsTable[i].userName} quatrieme valeur:  ${commentsTable[i].commentInput}')
}

il est possible d'utiliser deux boucles pour parcourir chaque objet mai on perd l'interet d'un objet (clee valeur)

[Beginner.]

@melka one Oui JSON.stringify() est ce que j'ai utilisé dans le code posté au message #7 mais ce n'est terrible d'afficher des données de cette manière...

Sinon pour la boucle ben tu as répondu...

- 1 pour enregistrer les données du nouveau commentaire sous forme d'objet pour l'ajouter au tableau.

Pas besoin de boucle pour ça, vous avez déjà votre fonction addComment qui ajoute un objet au tableau à chaque clique... Mais peut-être qu'utiliser push (Array.prototype.push()) serait mieux que unshift...

[melka one]

SON.stringify() est ce que j'ai utilisé dans le code posté au message #7

j'avais pas suivi le lien

[marionmc]

Merci pour vos réponses à tous les deux!

@Melka pour ta boucle, je l'ai ajouté en première position de mon bouton et effectivement cela marche bien, donc merci pour ce point!

Pour les anciens commentaires, c'est bon, j'ai simplement appelé une nouvelle fonction au moment du chargement de la page pour qu'il m'affiche ma table. En fait j'ai limpression que plus je bosse dessus, plus je me prends la tête et plus je complique les choses et jy vois encore moins clair!

Bon par contre pour l'application de classes à mon array de commentaires, ça se complique