Afficher contenu d'un tableau d'objets, élément par élément à la ligne.

Version imprimable

Bonjour à tous !

Alors voilà, j'essaie de créer un annuaire et j'aimerais afficher les éléments de mon tableau d'objet de sorte à ce que chacun soit à la ligne dans ma page html, genre :
NOM : Dora
adresse mail : @coucou
statut : Ami.

Et que l'ensemble soit dans des input différents ou des boites quoi (mais ca je pense qu'une fois qu'ils seront chacun à la ligne je reussirai à le faire avec le CSS.

VOici un bout de code JS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // ************************************ // RECHERCHER CONTACT //************************************* function rechercher() { recherche = $recherche.value; elements = " "; for (i = 0; i < contacts.length; i++) { if (contacts[i].prenom == recherche || contacts[i].nom == recherche || contacts[i].numero == recherche || contacts[i].mail == recherche || contacts[i].statut == recherche) { elements += "<li>" + texteContact(contacts[i]) + "</li>"; } } $resultats.innerHTML = elements; } // fonction principale
Et le bout de code html
Code:

1 2 3 4 5 6 7 8 <div class="recherche"> <h3 id="RechercherContact"> Rechercher un contact</h3> <center> <input id="recherche" placeholder="Recherche" /></center> <center> <button id="rechercher">Rechercher</button> </center> </div> <ul id="resultats" id="effacer"></ul>

27/11/2015, 16h25
autran

OK mais dis nous ce que tu obtiens et en quoi ça diffère de ce que tu veux.
Sinon on risque de croire que tu as photocopié des bouts de code sur internet et que tu attends un résultat tout fait.

Mais rapidement :
Pourquoi utilises tu $recherche, tu mélanges avec PHP, alors que

Code:

document.getElementById("recherche");

suffit
Je suppose que contacts est un tableau, il sort d'où?

Poste nous un code suffisamment autonome pour que l'on puisse le tester et te le debugger

Hop voici le code total de JS !
En fait ca m'affiche le contact avec son nom son mail et son numero en ligne dans un seul <li> alors que je voudrais que ca fasse :
-nom
-mail
-numero
par exemple ! En gros que le contenu de mon tableau d'objet soit vertical.

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
 
//************************************
//  CONTACT TABLEAU D'OBJET
//*************************************
contacts = [{}];
 
//************************************
//  CE QUE L'ON VA ENREGISTRER 
//*************************************
function texteContact(contact) {
  return  contact.nom.toUpperCase() + " " + contact.mail + " "  +" (" + contact.numero + ")" + " " + contact.statut;
}
 
//************************************
//  AFFICHER CONTACT
//*************************************
function afficherListe() {
    elements = "";
    for (i = 0; i < contacts.length; i++) {
        elements += "<li>" + texteContact(contacts[i]) + "</li>";
    }
    $liste.innerHTML = elements;
}
 
//************************************
//  AJOUTER CONTACT
//*************************************
function ajouter() {
    contacts.push({
        nom: $nom.value,
        numero: $numero.value,
        mail: $mail.value,
        statut: $statut.value
    });
if ($nom.value == "") {
alert("Veuillez entrer un Nom de contact s'il vous plait !");
}
else if ($nom.value != "") {
    alert("Vous avez bien ajouté " + " " + $nom.value + " " + "à vos contacts !");
}
else { 
alert("Vous avez bien ajouté ce contact"); 
}
}
//************************************
//  RECHERCHER CONTACT
//*************************************
function rechercher() {
    recherche = $recherche.value;
    elements = " ";
    for (i = 0; i < contacts.length; i++) {
        if (contacts[i].prenom == recherche || contacts[i].nom == recherche || contacts[i].numero == recherche || contacts[i].mail == recherche || contacts[i].statut == recherche) {
            elements += "<li>" + texteContact(contacts[i]) + "</li>";
        }     
    }
    $resultats.innerHTML = elements;
} // fonction principale
 
 
//************************************
//  AFFICHER TOUS LES RESULTATS
//*************************************
function listerTout () {
    toutContact = $recherche.value;
elements = " ";
for (i = 0; i < contacts.length; i++) {
        if (contacts[i].prenom == toutContact || contacts[i].nom == toutContact || contacts[i].numero == toutContact || contacts[i].mail == toutContact || contacts[i].statut == toutContact) {
            elements += "<li>" + texteContact(contacts[i]) + "</li>";
        }     
    }
    $result.innerHTML = elements;
} // fonction principale
 
 
//****************************************************
//  LA FONCTION DE DE CLIC SUR LE BOUTON POUR AJOUTER 
//****************************************************
$ajouter.onclick = ajouter;
$rechercher.onclick = rechercher;
$listerTout.onclick = listerTout;
afficherListe();

27/11/2015, 18h20
autran

tu as le HTML qui se mange avec ?

Si si !
J'ai le html qui se digère avec en effet :) !!
Par la même occaz, je vais essayer de lier le tout à une base de donnée en Php. J'ai déjà codé le systeme de log et là je suis aussi en quete pour lier les donnée entrantes de JS sur ma base Mysql.
En fait j'ai les 2 problèmes là que j'essaie de resoudre depuis 2 semaines :D !

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
 
<html>
 
<head>
    <meta charset="utf-8"/>
    <link href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
    <title>L'annuaire client</title>
</head>
 
 
<body onload="initialize()" data-spy="scroll" data-target=".navbar">   <!-- DEBUT DU BODY -->
 
 
    <!-- ******************************
         LA BARRE DE NAVIGATION NAVBAR
	 ******************************  -->
    <div class="container-fluid">
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle">
              <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">UnForgetMe</a>
                </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#unforgetme">Accueil</a>
              </li>
              <li><a href="#AjoutClient">Ajouter un contact</a>
              </li>
                        <li><a href="#RechercherContact">Recherche d'un contact</a>
                        </li>
              <li><a href="#ListerContact">Lister un contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
 
 
 
 <!-- ******************************
         LE HEADER
 ***********************************  -->
 
<header id="unforgetme">
<h1> Unforget-Me ! </h1>
<p> Unforget-Me est un annuaire en ligne qui permet de ne plus jamais perdre les coordonnées de ses amis ! Que ce soit un contact professionnel, amical, familial, n'ayez plus peur de casser votre téléphone ! Tout  </p>
</header>
 
 
 <!-- ******************************
         LE MAIN
 ***********************************  -->
 
<main>
 
 
 <!-- ******************************
       l'ajout de client + + option 
 ***********************************  -->
<h3 id="AjoutClient"> Ajouter un Contact </h3>
<div class="ajout"><center>
    <input id="nom" placeholder="Nom / Prénom" />
    <input id="numero" placeholder="Numéro de téléphone" />
    <input id="mail" placeholder="Mail" />
  <select id="statut" name="statut">
<option>Famille</option>
<option>Professionnel</option>
<option>Amis</option>
<option>Connaissance</option>
<option>Autre</option>
</select> </center>
    <center><button id="ajouter">Ajouter</button></center>
</div>
 
 
 <!-- ******************************
      la recherche client + affichage
 ***********************************  -->
 
<div class="recherche">
<h3 id="RechercherContact"> Rechercher un contact</h3>
   <center> <input id="recherche" placeholder="Recherche" /></center>
   <center> <button id="rechercher">Rechercher</button> </center>
</div>
 
<ul id="resultats"></ul>
 
 
 <!-- ******************************
      Affichage de tous les contacts
 ***********************************  -->  
<h3 id="ListerContact"> Accès à l'ensemble des contact </h3>
 
 
    <center><button id="listerTout">Lister</button> </center>
 
 
<ul id="result"></ul>
 
</main>
 
 
 
 <!-- ******************************
        INCLUSION FICHIER JAVASCRIPT
 ***********************************  -->
    <script src="annuaire.js" type="text/javascript"></script>
 
<!-- INSERTION JQUERY POUR LA NAVBAR-->
<script src="bootstrap/js/scrollmovement.js"></script>
<script src="bootstrap/js/addheight.js"></script>
 
</body>
 
</html>

28/11/2015, 14h01
NoSmoking
Bonjour,

Citation:

En fait ca m'affiche le contact avec son nom son mail et son numero en ligne dans un seul <li> alors que je voudrais que ca fasse :
-nom
-mail
-numero
par exemple !

c'est quand même ce que tu lui demande quelque part...
Code:

1 2 3 function texteContact(contact) { return contact.nom.toUpperCase() + " " + contact.mail + " " +" (" + contact.numero + ")" + " " + contact.statut; }
formate ta sortie pour obtenir une DL (définition liste) par exemple
Code:

1 2 3 4 5 <dl> <dt>contact.nom</dt> <dd>contact.mail</dd> <dd>contact.statut</dd> </dl>
Le CSS fera la suite.
28/11/2015, 15h27
noboxstyle

Merciiiiii :) !!!!
Je n'ai plus qu'à comprendre comment relier une base de donnée à tout ca :D !
Nickel !!
28/11/2015, 15h31
autran

je ne comprends pas noboxstyle.
ça veut dire quoi

Code:

$nom.value

est-ce un mot clé du javascript? car je ne le connais pas cette syntaxe
28/11/2015, 15h39
noboxstyle

Ouai @autran c'était une tentative pour mettre en lien mes variables avec une base de donnée PHP.
Ce qui est étrange c'est que le $ ne fait pas du tout buguer mon code.

En fait j'ai un système de log et je voulais mettre en lien les données entrées (genre mail ou numero) dans la base de donnée mySql ! Mais je n'y parviens pas du tout.
Je crois même que c'est impossible !
28/11/2015, 16h09
autran

Là on a quelques problèmes :

Tu nous dis :

Citation:

En fait ca m'affiche le contact avec son nom son mail et son numero en ligne dans un seul <li>

mais ça n'est pas possible en allant chercher ou en passant des valeurs à coup de $nom

Si tu veux développer dans un langage tu ne dois pas inventer des mots clef mais utiliser ceux qui existent --> donc tu dois apprendre le langage avec un tuto, un livre ou un prof

Quand on te demande ce que tu obtiens, n'invente pas, dis nous juste ce que ton programme affiche à l'écran.

Pour ce qui est de sélectionner un élément de ta page HTML, je t'ai expliqué comment faire dans ma première réponse en te disant que la syntaxe de PHP n'est pas la même que JavaScript
28/11/2015, 16h38
noboxstyle

1) pour le $ : une variable peut commencer par _ ou $ ! Je les distingue et je les appelle comme je veux ... donc je vois pas ou est le problème !
En plus je voulais tester un truc en mettant le $ devant donc c'était à double emploi.
Donc pour le livre, ou le prof, je te les renvoie :).

2) Je n'invente rien , et je sais que PHP et JS sont différents merci aussi :) !

3) J'a eu ma réponse dans le post avant toi et cela a résolu mon problème !!

PS : Je n'aime pas le ton que tu emploies :) ! Mais on va dire que j'ai mal interprété !
28/11/2015, 17h57
autran

Je craignais que tu n'espères "binder" un élément du DOM par un simple préfixage d'une variable JavaScript avec $ voire _ .

Ensuite c'est surement moi qui ai mal interprété, pensant que tu affirmais que le code source que tu avais posté pouvait afficher les données d'un abonné.

Je suis heureux que tu aies eu une réponse qui te satisfasse par ailleurs sur ce post. Je n'y aurais pas répondu si tu avais indiqué qu'il était résolu.