Annuaire perso en HTML

**Jpoly3** · 27/09/2025, 12h51

Bonjour,
je souhaite créer un annuaire perso.
Je ne retrouve pas mes données du fichier. JSON dans le htlm index.
Si quelqu'un pourrait m'aider, je le remercie par avance .
voici les fichiers : https://nuage01.apps.education.fr/in...areAQdxmi4HmSe
index.html

Code html :

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF‑8">
  <title>Annuaire</title>
  <style>
    body {
      font-family: Arial, sans‑serif;
      margin: 20px;
      background-color: #f9f9f9;
      color: #333;
    }
    header {
      display: flex;
      align-items: center;
      border-bottom: 2px solid #273375; /* bleu foncé */
      padding-bottom: 10px;
      margin-bottom: 20px;
    }
    header img { height: 60px; margin-right: 15px; }
    header h1 {
      color: #273375;
      font-size: 1.8em;
      margin: 0;
    }
    #searchBar {
      margin-bottom: 15px;
      width: 100%;
      padding: 8px;
      font-size: 1em;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .contact-list { list-style: none; padding: 0; }
    .contact-item {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 10px;
    }
    .contact-item img {
      border-radius: 50%;
      width: 50px;
      height: 50px;
      object-fit: cover;
      margin-right: 12px;
    }
    .contact-info {
      display: flex;
      flex-direction: column;
    }
    .name { font-weight: bold; color: #273375; }
    .role { font-size: 0.9em; color: #555; }
  </style>
</head>
<body>
 
<header>
  <img src=" alt="">
  <h1>Annuaire interne</h1>
</header>
 
<input type="text" id="searchBar" placeholder="Rechercher un contact..." />
 
<ul class="contact-list" id="contactList"></ul>
 
<script>
let contacts = [];
 
// Affichage des contacts
function afficher(contactsFiltres) {
  const list = document.getElementById('contactList');
  list.innerHTML = '';
  contactsFiltres.forEach(c => {
    const li = document.createElement('li');
    li.className = 'contact-item';
    li.innerHTML = `
      <img src="${c.photo}" alt="Photo de ${c.nom}" />
      <div class="contact-info">
        <span class="name">${c.nom}</span>
        <span class="role">${c.role}</span>
        <span class="email">${c.email}</span>
      </div>`;
    list.appendChild(li);
  });
}
 
// Charger les contacts depuis le fichier JSON
fetch('contacts.json')
  .then(response => response.json())
  .then(data => {
    contacts = data;
    afficher(contacts);
  })
  .catch(error => {
    console.error("Erreur lors du chargement des contacts :", error);
  });
 
// Filtrage dynamique
document.getElementById('searchBar').addEventListener('input', function() {
  const terme = this.value.toLowerCase();
  const filtres = contacts.filter(c =>
    c.nom.toLowerCase().includes(terme) ||
    c.role.toLowerCase().includes(terme) ||
    c.email.toLowerCase().includes(terme)
  );
  afficher(filtres);
});
</script>
 
</body>
</html>

contacts.json

Code json :

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
[
  {
    "nom": "Dupont, Marie",
    "role": "Inspectrice",
    "email": "marie.dupont@ac-orleans-tours.fr",
    "photo": "https://via.placeholder.com/50?text=MD"
  },
  {
    "nom": "Martin, Julien",
    "role": "IA-IPR",
    "email": "julien.martin@ac-orleans-tours.fr",
    "photo": "https://via.placeholder.com/50?text=JM"
  },
  {
    "nom": "Durand, Sophie",
    "role": "Chargée de mission",
    "email": "sophie.durand@ac-orleans-tours.fr",
    "photo": "https://via.placeholder.com/50?text=SD"
  }
]

Bien à vous,

**Toufik83** · 27/09/2025, 19h55

Bonjour,

Comment tu fais pour afficher la page d'index ? tu passes par un serveur local comme xampp, wampp, ou autres... ou pas ?

**Jpoly3** · 28/09/2025, 10h51

J'ouvre simplement le fichier avec un navigateur

**Toufik83** · 28/09/2025, 15h14

Haa non, le fichier doit être exécuté sous un serveur, parce que tu utilises la méthode fetch, et cette fonction nécessite une liaison serveur.

**fred1599** · 28/09/2025, 15h35

Hello,

J'ajoute à ce qu'à déjà dit @Toufik83 que votre navigateur empêche activement votre JavaScript de lire votre fichier contacts.json pour vous protéger.

Si c'est pour un test rapide, pour voir ce que ça donne pour vos contacts, vous pouvez supprimer tout ce qui est lié à fetch et copier le contenu de votre fichier json dans une variable JavaScript.

**Jpoly3** · 28/09/2025, 15h44

Merci pour vos réponse.

Du coup il y a t'il une méthode pour créer ce genre d'annuaire, avec une base de données contacts, qui ne soit pas dans le code de la page et facilement modifiable (tableur) ?

**Toufik83** · 28/09/2025, 16h26

Oui c'est possible, pour ceci tu dois installer un serveur local comme xampp par exemple qui contient un langage serveur et un gestionnaire de base de donnée .

**Jpoly3** · 28/09/2025, 16h40

D'accord.
Je ne pourrais pas car je voulais que ce soit utilisable par plusieurs utilisateurs sur des PC différents.

**Toufik83** · 28/09/2025, 17h06

Dans ce cas, tu dois hébérger tes pages sur un serveur en ligne, comme ça ton site contiendra une base de donnée accessible/modifiable par plusieurs utilisateurs.

Je disais un serveur local au début parce qu'il se comporte de la même façon qu'un serveur en ligne, nous y testons notre travail localement avant de le mettre en ligne....

Annuaire perso en HTML

jQuery

Vue hybride

Discussions similaires

Partager

Partager